javascript中截断字符串的核心方法有slice()、substring()和substr()；2. slice()支持负索引且行为可预测，推荐使用；3. substring()不支持负索引且会自动交换参数顺序，需注意其“智能”行为；4. substr()第二个参数为长度而非结束索引，但已被废弃，不建议在新项目中使用；5. 截断时应结合maxlength判断，超长则截取并添加省略号，否则原样返回；6. 处理边界情况需校验输入类型、空字符串及无效maxlength，确保函数健壮；7. 为避免截断中文或表情符号导致乱码，应使用array.from(str)将字符串转为字符数组，基于视觉字符（字形簇）进行截取；8. 保持单词完整性需在截断后查找最后一个空格位置，确保不在单词中间断开，适用于英文等空格分隔语言；9. 中文因无空格分隔，需依赖中文分词库实现词语完整性截断，否则退化为按字符截断；综上，应根据实际需求选择合适方法并综合处理unicode、边界和用户体验问题，以实现安全可靠的字符串截断功能。
JavaScript中截断字符串，说白了，就是根据你的需求，把一个长字符串“剪短”。这通常是为了显示优化，比如在列表里展示文章标题，或者在卡片上显示摘要，你肯定不希望它撑破布局。最直接的办法，无非就是利用字符串自带的几个方法，比如
slice()
、
substring()
，然后根据需要加个省略号。
解决方案
要实现字符串截断，我们通常会结合字符串的长度判断，然后使用内置方法进行切割。最常用且推荐的是
slice()
，因为它在处理负索引时表现更灵活，虽然对于简单的截断，
substring()
也完全够用。
一个基本的截断逻辑是这样的：我们设定一个最大长度，如果字符串超出了这个长度，就截取前面一部分，并在末尾加上“…”；如果没超出，就原样返回。
/**
* 截断字符串并添加省略号
* @param {string} str - 需要截断的原始字符串
* @param {number} maxLength - 允许的最大长度（不包含省略号的长度）
* @returns {string} 截断后的字符串
*/
function truncateString(str, maxLength) {
if (typeof str !== 'string' || str === null) {
return ''; // 容错处理，非字符串或null直接返回空
}
if (str.length <= maxLength) {
return str; // 字符串本身就没超过最大长度，直接返回
}
// 使用 slice 截取，并拼接省略号
return str.slice(0, maxLength) + '...';
}
// 示例
// console.log(truncateString("这是一个很长很长的字符串，需要被截断。", 10)); // 输出: "这是一个很长..."
// console.log(truncateString("短字符串", 10)); // 输出: "短字符串"
// console.log(truncateString(null, 10)); // 输出: ""
JavaScript字符串截断的几种核心方法及其区别？
在JavaScript里，字符串截断主要依赖于
slice()
、
substring()
和
substr()
这三个方法。它们都能从字符串中提取一部分，但用法和行为上有些微妙的差异，了解这些能帮你更好地选择。
slice(startIndex, endIndex)
：
这个方法用起来感觉最“现代”和灵活。它接受两个参数：起始索引（包含）和结束索引（不包含）。如果省略
endIndex
，它会截取到字符串的末尾。最酷的是，它支持负数索引，比如
slice(-5)
会从字符串末尾开始截取5个字符。这在某些场景下非常方便，比如你想取最后几个字符。
let myString = "Hello World"; console.log(myString.slice(0, 5)); // "Hello" console.log(myString.slice(6)); // "World" (从索引6到末尾) console.log(myString.slice(-5)); // "World" (从倒数第5个字符开始) console.log(myString.slice(0, -6)); // "Hello" (从开头到倒数第6个字符)
substring(startIndex, endIndex)
：
substring
和
slice
很像，同样接受起始索引和结束索引。但它有几个地方不一样。首先，它不支持负数索引，负数会被当作0处理。其次，如果
startIndex
大于
endIndex
，它会自动交换这两个参数，确保总是从小索引到大索引截取。这有时会让人觉得“智能”，但有时也会让行为变得不那么直观。
let myString = "Hello World"; console.log(myString.substring(0, 5)); // "Hello" console.log(myString.substring(5, 0)); // "Hello" (自动交换参数) console.log(myString.substring(6)); // "World" (从索引6到末尾) // console.log(myString.substring(-5)); // "Hello World" (负数被当0处理)
substr(startIndex, length)
：
这个方法现在已经不推荐使用了（MDN上标记为deprecated），但你可能在一些老代码里看到它。它的第二个参数不是结束索引，而是你想要截取的字符数量。这有时候会更符合人类的直觉：“从这里开始，给我取多少个字符”。它也支持负数
startIndex
，表示从字符串末尾开始计算。
let myString = "Hello World"; console.log(myString.substr(0, 5)); // "Hello" console.log(myString.substr(6, 5)); // "World" (从索引6开始取5个字符) console.log(myString.substr(-5, 5)); // "World" (从倒数第5个字符开始取5个字符)
总结一下：日常开发，我个人更倾向于用
slice()
，因为它功能全面且行为可预测。
substring()
在处理参数顺序上有点“过于智能”，而
substr()
虽然直观，但考虑到它的废弃状态，新项目里最好避免使用。
如何在截断字符串时优雅地添加省略号并处理边界情况？
仅仅截断字符串通常是不够的，我们还需要在被截断的字符串后面加上“…”来提示用户内容不完整。同时，处理一些边界情况也至关重要，比如空字符串、字符串本身就比较短、或者
maxLength
设为0等。
一个“优雅”的实现，应该能涵盖这些情况：
-
判断是否需要截断：只有当字符串长度超过
maxLength
时才进行截断并添加省略号。
-
处理空字符串或非字符串输入：确保函数不会因为
null
、
undefined
或数字等非字符串输入而报错。
-
maxLength
为0或负数
：当maxLength
为0时，应该直接返回省略号（如果原始字符串非空），负数则可能需要返回空字符串或抛出错误，具体看需求。通常，我们会认为
maxLength
至少是1。
基于这些考虑，我们可以优化之前的
truncateString
函数：
function truncateStringWithEllipsis(str, maxLength) {
// 1. 容错处理：确保输入是字符串，且 maxLength 是有效的数字
if (typeof str !== 'string' || str === null) {
return '';
}
if (typeof maxLength !== 'number' || maxLength < 0) {
// 对于无效的 maxLength，可以根据业务需求返回空字符串或原始字符串
// 这里选择返回原始字符串，因为 maxLength 无效可能意味着不限制长度
return str;
}
// 2. 特殊情况：maxLength 为 0
if (maxLength === 0) {
return str.length > 0 ? '...' : ''; // 如果原字符串非空，截断为"..."；否则为空
}
// 3. 核心逻辑：判断是否需要截断
if (str.length <= maxLength) {
return str; // 字符串本身就没超过最大长度，直接返回
}
// 4. 截断并添加省略号
// 这里的 maxLength 是指截断后可见字符的长度，不包含省略号
return str.slice(0, maxLength) + '...';
}
// 示例测试：
// console.log(truncateStringWithEllipsis("这是一个很长很长的字符串，需要被截断。", 10)); // "这是一个很长..."
// console.log(truncateStringWithEllipsis("短字符串", 10)); // "短字符串"
// console.log(truncateStringWithEllipsis("", 10)); // ""
// console.log(truncateStringWithEllipsis("Hello", 0)); // "..." (因为原字符串非空)
// console.log(truncateStringWithEllipsis("", 0)); // ""
// console.log(truncateStringWithEllipsis("Testing null", null)); // "Testing null" (maxLength 无效，返回原字符串)
// console.log(truncateStringWithEllipsis(123, 5)); // "" (非字符串输入)
这个版本考虑了更多实际使用中的“意外”情况，让函数更加健壮。
字符串截断中如何避免截断中文、表情符号等特殊字符导致乱码？
这是一个非常实际且棘手的问题。JavaScript的字符串方法（如
length
、
slice
、
substring
）在处理Unicode字符时，是基于UTF-16编码的“码元”（code units）来计算长度和进行截取的。一个英文字符通常是一个码元，一个中文字符通常也是一个码元。但问题来了，一些表情符号（emoji）或者生僻字，它们可能由两个UTF-16码元组成，形成一个“代理对”（surrogate pair）。更复杂的是，有些字符（比如带音调的字母或某些复杂的表情）是由多个码元组成一个“字形簇”（grapheme cluster），但它们在视觉上被视为一个字符。
如果你直接用
slice(0, maxLength)
，很可能截断在代理对的中间，导致显示乱码（通常是�这样的方块），或者截断在字形簇的中间，使得字符显示不完整。
要解决这个问题，我们需要从“码元”的视角切换到“字形”的视角。ES6引入了一种更方便的方式来迭代字符串，它能正确处理代理对和一些字形簇：
Array.from()
。
Array.from(str)
会将字符串转换为一个数组，其中每个元素代表一个完整的Unicode字符（一个字形簇）。这样，我们就可以基于视觉上的字符数进行截断。
function truncateUnicodeString(str, maxLength) {
if (typeof str !== 'string' || str === null) {
return '';
}
if (typeof maxLength !== 'number' || maxLength < 0) {
return str;
}
if (maxLength === 0) {
return Array.from(str).length > 0 ? '...' : '';
}
// 将字符串转换为字符数组（处理代理对和字形簇）
const chars = Array.from(str);
if (chars.length <= maxLength) {
return str; // 字符数没超过最大长度，直接返回
}
// 截取字符数组，然后重新拼接成字符串
return chars.slice(0, maxLength).join('') + '...';
}
// 示例：
// 正常英文：
// console.log(truncateUnicodeString("Hello World", 5)); // "Hello..."
// 中文：
// console.log(truncateUnicodeString("你好世界，这是一个测试。", 5)); // "你好世界，..." (5个中文字符)
// 表情符号：
// ⚡️ (闪电符号，一个码元)
// ???? (家庭符号，多个码元组成一个字形簇)
// console.log("⚡️".length); // 1
// console.log("????".length); // 11 (注意，这里是11个码元，但视觉上是一个字符)
// 使用原生 slice 截断表情符号可能出问题：
// console.log("????".slice(0, 5) + '...'); // 截断了代理对，可能显示乱码
// 使用 truncateUnicodeString 截断表情符号：
// console.log(truncateUnicodeString("????", 1)); // "????..." (即使 maxLength=1，也能正确显示一个完整表情)
// console.log(truncateUnicodeString("Hello ???? World", 8)); // "Hello ????..."
// console.log(truncateUnicodeString("??", 1)); // "??..." (?? 是一个表情符号 + 肤色修饰符，也是一个字形簇)
通过
Array.from()
，我们实际上是把字符串拆分成了视觉上独立的“字符”单元，这样无论是中文、日文、韩文，还是复杂的表情符号，都能被正确地计数和截断，大大提升了字符串处理的健壮性。
截断字符串时如何保持单词完整性？
在很多文本展示场景，比如文章摘要，我们不希望字符串在单词中间被截断，那样看起来会很生硬，甚至影响阅读体验。比如“Hello Worl…”就比“Hello…”差远了。为了保持单词的完整性，我们需要在截断后，寻找最后一个完整的单词边界，然后从那里进行截断。
这个需求就比简单的字符截断复杂一些了，它需要对文本内容有更深层次的理解。
基本思路是：
- 首先，按照设定的
maxLength
进行初步截断。
- 检查截断后的最后一个字符是否是空格，或者截断点是否正好在一个单词的中间。
- 如果截断点在一个单词的中间，那么我们需要回溯，找到离截断点最近的那个单词结束符（通常是空格或标点符号）。
- 从这个单词结束符处截断，并添加省略号。
/**
* 截断字符串并保持单词完整性，添加省略号
* @param {string} str - 原始字符串
* @param {number} maxLength - 最大长度（不包含省略号）
* @returns {string} 截断后的字符串
*/
function truncateWords(str, maxLength) {
if (typeof str !== 'string' || str === null) {
return '';
}
if (typeof maxLength !== 'number' || maxLength < 0) {
return str;
}
if (maxLength === 0) {
return Array.from(str).length > 0 ? '...' : '';
}
const chars = Array.from(str); // 使用 Array.from 处理 Unicode 字符
if (chars.length <= maxLength) {
return str; // 字符串本身就没超过最大长度，直接返回
}
// 初步截断
let truncatedChars = chars.slice(0, maxLength);
let result = truncatedChars.join('');
// 检查截断点是否在单词中间
// 假设单词分隔符是空格。更复杂的场景可能需要考虑标点符号。
// 如果截断后的最后一个字符不是空格，并且原始字符串在截断点之后还有非空格字符
if (result[result.length - 1] !== ' ' && chars[maxLength] !== ' ') {
let lastSpaceIndex = result.lastIndexOf(' ');
if (lastSpaceIndex !== -1) {
// 找到最后一个空格，从这里截断
result = result.substring(0, lastSpaceIndex);
} else {
// 如果截断部分没有空格（即第一个单词就很长），那就硬截断
// 此时，可以根据需求选择是硬截断还是显示整个单词
// 这里选择硬截断，因为通常maxLength已经考虑了最长单词的情况
// 也可以选择返回原字符串如果第一个单词就超过maxLength，但这不符合截断目的
}
}
// 避免只有省略号的情况，除非 maxLength 极小且原字符串有内容
if (result.trim().length === 0 && chars.length > 0) {
// 如果回溯后结果为空，但原字符串非空，则直接返回 maxLength 长度的硬截断，并加省略号
// 或者可以考虑返回第一个单词
return chars.slice(0, maxLength).join('') + '...';
}
return result.trim() + '...'; // trim() 移除末尾可能多余的空格
}
// 示例：
// console.log(truncateWords("This is a very long sentence.", 10)); // "This is a..."
// console.log(truncateWords("Another very long example.", 10)); // "Another..."
// console.log(truncateWords("Supercalifragilisticexpialidocious", 10)); // "Supercalif..." (这种情况会硬截断，因为没有空格)
// console.log(truncateWords("Hello World", 5)); // "Hello..."
// console.log(truncateWords("一个很长的中文句子，需要保持词语完整性。", 8)); // "一个很长的中文句子..." (中文词语通常没有空格分隔，所以这里需要更复杂的中文分词库)
关于中文词语完整性： 上面的
truncateWords
函数主要针对以空格分隔的语言（如英文）。对于中文，由于词语之间没有空格分隔，简单的
lastIndexOf(' ')
是行不通的。要实现中文的词语完整性截断，你需要引入一个中文分词库（如
jieba-js
等），先对字符串进行分词，然后基于词语数组进行截断。这会增加代码的复杂性和依赖，但能提供更好的用户体验。在没有分词库的情况下，对中文进行“单词”截断，通常就只能退化为按字符数硬截断。
总之，字符串截断看似简单，但在实际应用中，考虑到Unicode、用户体验（省略号、单词完整性）以及各种边界情况，它其实是个需要细致思考的小功能。选择合适的工具和策略，才能写出健壮且用户友好的代码。
暂无评论内容