JavaScript 截取中英文混合字符串：substring、substr 用法与自定义实现

陈默

发布时间：2026-10-14 | 5人浏览过

原创

在 Web 前端开发中，经常需要限制显示字数。由于中文字符通常占用两个字节（视觉上也是双宽），直接使用标准的字符截取方法会导致中文被切断半个字。本文对比原生 substring 与 substr 的方法差异，并提供一个支持中英文混合、按视觉长度精准截断的 JavaScript 函数实现。

原生截取方法的区别

在处理纯 ASCII 字符（如英文、数字）时，substring 和 substr 均可工作，但它们的参数定义和行为存在显著差异，尤其在处理负数索引时表现不同。

第1步：理解 substring 的逻辑

substring(start, end) 接受起始位置和结束位置（不包含该位置）。它会自动处理参数交换（即 start > end 时自动互换），且任何负数参数都会被视作 0。

var str = "0123456789";
alert(str.substring(0, 5));     // "01234"
alert(str.substring(2, 0));     // "01" (自动互换为 0, 2)
alert(str.substring(-1, 5));    // "01234" (负数转为 0)
alert(str.substring(2, -2));    // "01" (负数转为 0，截取 0-2)

第2步：理解 substr 的逻辑

substr(start, length) 接受起始位置和要截取的字符数量。与 substring 不同，如果第二个参数为负数或第一个参数为负数，行为有所不同。substr 已被标记为遗留功能，建议在新项目中优先使用 slice 或 substring，但在维护旧代码时需注意其特性：

var str = "0123456789";
alert(str.substr(2, 5));        // "23456" (从第2位起取5个字符)
alert(str.substr(2, -1));       // "" (长度为负返回空)
alert(str.substr(-1, 5));       // "9" (从倒数第1位起，但长度不足5，返回剩余部分)

中英文混合字符串的截取难点

在涉及中文界面时，简单的字节或字符计数往往不准确。例如，一个汉字在 UI 上占据的宽度通常相当于两个英文字母。如果用户要求显示 15 个“字符宽度”的内容，直接截取 15 个 Unicode 字符可能会造成视觉上的不平衡，或者截断在汉字的中间导致显示异常（取决于编码环境，但在现代 UTF-8/Unicode 环境下主要问题是语义截断而非编码错误）。

实现支持中英文混合的智能截取

为了实现按视觉宽度截断并保持语义完整（不在汉字中间切断），我们可以采用以下策略：将非 ASCII 字符（通常是中文）视为 2 个单位长度，ASCII 字符视为 1 个单位长度。当达到指定长度阈值时，回退到最近的边界点并追加省略号。

第1步：定义正则匹配规则

使用正则表达式 /[^\x00-\xff]/g 来匹配所有非 ASCII 字符（即中文及其他多字节字符）。我们将这些字符替换为双字节字符（如 'mm'）来计算等效长度。

第2步：编写截取函数代码

以下函数 sub 接收原始字符串和目标视觉长度 n。

复制代码代码如下:

<script type="text/javascript">
var sub=function(str,n){ 
    var r=/[^\\x00-\\xff]/g; 
    // 如果整个字符串的视觉长度都不超过 n，直接返回
    if(str.replace(r,"mm").length<=n){return str;} 
    
    // 初始化搜索起始点，从目标长度的一半开始向前试探
    var m=Math.floor(n/2); 
    for(var i=m;i<str.length;i++){ 
        // 检查当前截断点的视觉长度
        if(str.substr(0,i).replace(r,"mm").length>=n){ 
            return str.substr(0,i)+"..."; 
        } 
    } 
    return str; 
}
// 测试用例：目标是显示约15个视觉单位
alert(sub('字符串截取Javascript处理总结(Js截取中文字符串总结)',15))
</script>

第3步：解析函数逻辑

全量检查：首先判断是否需要截断。若 str.replace(r, "mm").length <= n，说明不需要截断，直接返回原串。
二分查找优化：为了效率，不从索引 0 开始线性遍历，而是从 n/2 处开始查找。因为最坏情况下，我们需要找到一个索引 i，使得前 i 个字符的视觉长度接近 n。
精确截断：当 str.substr(0,i) 的视觉长度首次大于等于 n 时，停止循环，返回前缀加 "..."。