JS字符串截断技巧全解析

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《JS字符串截断方法大全》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

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等。

一个“优雅”的实现，应该能涵盖这些情况：

1. 判断是否需要截断：只有当字符串长度超过maxLength时才进行截断并添加省略号。
2. 处理空字符串或非字符串输入：确保函数不会因为null、undefined或数字等非字符串输入而报错。
3. 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...”差远了。为了保持单词的完整性，我们需要在截断后，寻找最后一个完整的单词边界，然后从那里进行截断。

这个需求就比简单的字符截断复杂一些了，它需要对文本内容有更深层次的理解。

基本思路是：

1. 首先，按照设定的maxLength进行初步截断。
2. 检查截断后的最后一个字符是否是空格，或者截断点是否正好在一个单词的中间。
3. 如果截断点在一个单词的中间，那么我们需要回溯，找到离截断点最近的那个单词结束符（通常是空格或标点符号）。
4. 从这个单词结束符处截断，并添加省略号。

/**
 * 截断字符串并保持单词完整性，添加省略号
 * @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、用户体验（省略号、单词完整性）以及各种边界情况，它其实是个需要细致思考的小功能。选择合适的工具和策略，才能写出健壮且用户友好的代码。

终于介绍完啦！小伙伴们，这篇关于《JS字符串截断技巧全解析》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！