js截取字符串前几位: 是什么、为什么、哪里、多少、如何、怎么详解

是什么？理解JavaScript中字符串截取前几位的核心概念

在JavaScript中，当我们需要从一个较长的字符串的开头部分，提取出指定数量的字符来形成一个新的字符串时，这便是“截取字符串前几位”操作。这个操作的核心目的在于获取原字符串的一个“前缀”或“片段”。它并非修改原字符串，而是基于原字符串创建一个全新的、长度受限的字符串。

在JS中，实现这一目标主要依赖于字符串（String）原型上提供的多种内置方法，其中最常用且推荐的有 String.prototype.slice() 和 String.prototype.substring()。还有一个相对较旧且已被推荐弃用的 String.prototype.substr() 方法。无论使用哪种方法，它们都返回一个新的字符串，而原始字符串本身保持不变。

• 获取前缀： 从字符串的第一个字符（索引0）开始，向后截取固定数量的字符。
• 非破坏性操作： 所有的截取方法都不会改变原始字符串，而是返回一个新的字符串副本。
• 返回类型： 总是返回一个字符串。即使截取的长度为0，也会返回一个空字符串 ""。

为什么需要截取字符串？背后的业务与用户体验驱动

字符串截取前几位的需求在前端开发中非常普遍，它通常是由以下几个核心原因驱动的：

• 界面显示限制与优化

  在许多用户界面（UI）场景中，预留给文本内容的显示空间是有限的。如果内容过长，可能会导致布局混乱、元素溢出或整体美观度下降。通过截取字符串前几位，我们可以确保文本在有限的空间内正常显示，避免视觉上的破坏。
  
  例如：新闻标题、商品描述、用户评论的摘要预览等。

• 内容预览与摘要生成

  为了提高用户阅读效率和信息概览性，我们经常需要为长文本生成一个简短的预览或摘要。用户可以通过阅读摘要快速判断是否对完整内容感兴趣，从而决定是否点击查看详情。
  
  例如：博客文章列表中的文章简介、电子邮件列表中的邮件主题和内容摘要。

• 数据规范化与格式统一

  在某些数据处理或表单输入场景中，可能需要对用户输入或从后端获取的数据进行长度限制，以保证数据格式的统一性或满足特定的存储要求。
  
  例如：昵称、标签、短描述等字段的长度限制。

• 性能优化

  虽然JavaScript的字符串操作通常性能良好，但在极少数情况下，如果需要在客户端处理并显示大量超长字符串，截取操作可以在一定程度上减少渲染时的DOM复杂度和内存占用（虽然影响微乎其微）。更重要的是，它减少了用户必须处理的视觉信息量。

哪里会用到字符串截取？具体的应用场景

字符串截取前几位的操作几乎渗透到所有需要文本呈现和处理的Web应用领域：

• 新闻或博客列表页面：

  文章标题可能过长，需要截取并添加省略号（“…”）以适应列表布局。文章正文通常只显示前几十或几百字作为摘要。

• 电商网站的产品卡片：

  商品名称、描述或评论通常会截取一定长度，以在有限的产品卡片区域内清晰展示。

• 社交媒体动态流：

  用户的长篇帖子、评论或分享内容，在动态流中往往只显示前几行或前几十个字符，点击“展开”或“查看更多”才能看到完整内容。

• 表格数据展示：

  当表格单元格内容过长时，为保持表格列宽的整齐和美观，常会截取显示，鼠标悬停时显示完整内容。

• 搜索结果页：

  搜索结果的描述部分，为了让用户快速了解内容概要，会截取相关的片段或前几位字符。

• 用户个人资料页面：

  用户的个性签名、自我介绍等信息，在页面上可能只显示部分内容。

• 消息通知与弹窗：

  短消息通知或系统弹窗中的提示文本，为简洁明了，会截取关键信息展示。

• 表单验证与数据预览：

  在用户输入长文本时，实时预览输入内容的前几位，或在提交前限制最大输入长度。

截取多少位合适？长度的考量与Unicode字符的挑战

截取多少位字符是一个需要根据具体设计和用户体验目标来决定的问题，没有一成不变的标准答案。

1. 根据显示空间：

   这是最直接的考量。例如，在移动端屏幕上，一行可能只能显示15-20个汉字或30-40个英文字符。在固定宽度的容器内，需要测试多少字符可以完整显示而不溢出。

2. 根据信息密度：

   要截取的内容是否包含足够的核心信息？例如，一个新闻标题可能需要截取到能概括主题的程度（如15-30个字符）。而一个文章摘要则可能需要更长（如50-200个字符）才能提供足够多的预览信息。

3. 目标用户群：

   不同的用户群体对信息量和阅读习惯有差异。

4. 语言特性：

   中文、日文、韩文等东亚字符（CJK字符）通常一个字符占据的视觉宽度约等于两个英文字符。因此，如果针对包含多语言内容的页面，通常需要更短的截取长度来适应布局，或者采取按字节或按视觉宽度截取而非按字符数截取的策略。

Unicode字符（如表情符号和某些特殊符号）的挑战：

这是JavaScript字符串长度计算中的一个常见陷阱。JavaScript的 String.prototype.length 属性返回的是字符串中的“UTF-16码元（code unit）”数量，而不是实际的“字符（character）”或“字形（glyph）”数量。

• 基本多语言平面（BMP）字符： 大多数常用字符（包括汉字、英文字母、数字）都属于BMP，一个BMP字符占用一个UTF-16码元，所以 .length 的结果是准确的。

• 辅助平面字符（Surrogate Pairs）： 某些表情符号（Emoji）、不常用的汉字和一些特殊符号，它们在UTF-16编码中需要两个码元（一个高代理码元和一个低代理码元）来表示。
  
  例如，字符串 "你好😂世界"：

  • "你": 1码元
  • "好": 1码元
  • "😂": 2码元 (一个字符，但.length算作2)
  • "世": 1码元
  • "界": 1码元

  所以 "你好😂世界".length 的结果是 6，但实际视觉上只有5个字符。如果直接使用 .slice(0, 5)，你可能会得到 "你好😂世"，这是因为 😂 被截断，或者结果比预期少一个字符。

处理辅助平面字符的策略：

为了准确地按“字符”而非“码元”截取，可以利用ES6的 Array.from() 方法将字符串转换为一个真正的字符数组，然后再进行截取，最后再用 .join('') 拼接回来。

function truncateByActualCharacters(str, maxLength) {
    if (!str || maxLength <= 0) {
        return "";
    }
    const characters = Array.from(str); // 将字符串转换为字符数组，正确处理辅助平面字符
    if (characters.length <= maxLength) {
        return str;
    }
    return characters.slice(0, maxLength).join('');
}

// 示例
const textWithEmoji = "你好😂世界，这是一个测试文本。";
console.log(textWithEmoji.length); // 输出: 18 (码元数)
console.log(truncateByActualCharacters(textWithEmoji, 5)); // 输出: "你好😂世" (实际是5个字符)
console.log(textWithEmoji.substring(0, 5)); // 输出: "你好😂" (因为😂占了两个码元，所以只截取了4个字符+半个😂)

这个方法可以确保即使在有表情符号等辅助平面字符的情况下，也能按照我们期望的“字符数量”进行截取。

如何进行字符串截取？核心方法与实践

JavaScript提供了几种内置方法来截取字符串。下面我们将详细介绍它们，并提供使用示例。

String.prototype.slice()

slice() 方法提取字符串的一部分，并返回一个新的字符串。它接受两个可选参数：beginIndex（开始索引）和 endIndex（结束索引）。

• str.slice(beginIndex[, endIndex])
• beginIndex： 必需。从该索引（包含）处开始提取字符。如果为负数，则从字符串末尾开始计算，例如 -1 表示最后一个字符。
• endIndex： 可选。到该索引（不包含）处结束提取字符。如果省略，则截取到字符串的末尾。如果为负数，则从字符串末尾开始计算。

特点：

1. 如果 beginIndex 大于 endIndex，slice() 会返回一个空字符串 ""。
2. 如果任何一个参数为负值，它会被视为 str.length + 参数值。
3. 推荐使用，因为它行为相对一致，且支持负索引。

const originalString = "JavaScript字符串截取示例";

// 截取前5个字符
const result1 = originalString.slice(0, 5);
console.log(result1); // 输出: "JavaS"

// 截取到字符串末尾
const result2 = originalString.slice(0);
console.log(result2); // 输出: "JavaScript字符串截取示例" (返回原字符串副本)

// 截取超出字符串长度
const result3 = originalString.slice(0, 100);
console.log(result3); // 输出: "JavaScript字符串截取示例" (返回原字符串副本，不会报错)

// 负索引示例 (虽然不是截取前几位，但展示其特性)
const result4 = originalString.slice(-4);
console.log(result4); // 输出: "示例"

String.prototype.substring()

substring() 方法也提取字符串的一部分，并返回一个新的字符串。它也接受两个可选参数：indexStart（开始索引）和 indexEnd（结束索引）。

• str.substring(indexStart[, indexEnd])
• indexStart： 必需。从该索引（包含）处开始提取字符。
• indexEnd： 可选。到该索引（不包含）处结束提取字符。如果省略，则截取到字符串的末尾。

特点：

1. substring() 会自动调整参数，确保 indexStart 总是小于 indexEnd。如果 indexStart > indexEnd，它会交换这两个值。
2. 任何负数参数或 NaN 参数都会被视为 0。
3. 不接受负索引。

const originalString = "JavaScript字符串截取示例";

// 截取前5个字符
const result1 = originalString.substring(0, 5);
console.log(result1); // 输出: "JavaS"

// 截取到字符串末尾
const result2 = originalString.substring(0);
console.log(result2); // 输出: "JavaScript字符串截取示例"

// 截取超出字符串长度
const result3 = originalString.substring(0, 100);
console.log(result3); // 输出: "JavaScript字符串截取示例"

// 参数自动调整示例 (非截取前几位常见用法，但展示其特性)
const result4 = originalString.substring(5, 0); // 会自动交换参数为 (0, 5)
console.log(result4); // 输出: "JavaS"

// 负数参数被视为0
const result5 = originalString.substring(-5, 5); // 相当于 (0, 5)
console.log(result5); // 输出: "JavaS"

String.prototype.substr() (已弃用)

substr() 方法提取字符串中从指定位置开始的指定数量的字符。它接受两个参数：start（开始索引）和 length（要截取的长度）。

重要提示： String.prototype.substr() 方法在ECMAScript标准中已经被标记为“不推荐使用（Deprecated）”。尽管目前大多数浏览器仍然支持它，但在新的开发中应避免使用，并优先考虑使用 slice() 或 substring()。

• str.substr(start[, length])
• start： 必需。开始提取字符的索引。如果为负数，则从字符串末尾开始计算。
• length： 可选。要截取的字符数量。如果省略，则截取到字符串的末尾。

const originalString = "JavaScript字符串截取示例";

// 截取前5个字符 (从索引0开始，截取5个字符)
const result1 = originalString.substr(0, 5);
console.log(result1); // 输出: "JavaS"

// 截取到字符串末尾
const result2 = originalString.substr(0);
console.log(result2); // 输出: "JavaScript字符串截取示例"

// 截取超出字符串长度 (仍然只截取到字符串末尾)
const result3 = originalString.substr(0, 100);
console.log(result3); // 输出: "JavaScript字符串截取示例"

// 负索引示例
const result4 = originalString.substr(-4, 2); // 从倒数第4个字符开始，截取2个
console.log(result4); // 输出: "示例"

封装一个通用的截取函数

为了提高代码复用性、可读性并统一处理截取逻辑，通常会将其封装成一个函数。这个函数可以处理字符串长度、添加省略号等常见需求。

/**
 * 截取字符串前几位，并可选择添加省略号
 * @param {string} str - 需要截取的字符串
 * @param {number} maxLength - 允许的最大字符数
 * @param {boolean} [addEllipsis=true] - 是否在截取后添加省略号，默认为true
 * @returns {string} 截取后的字符串
 */
function truncateString(str, maxLength, addEllipsis = true) {
    if (typeof str !== 'string' || maxLength < 0) {
        // 处理无效输入
        console.warn("Invalid input: str must be a string, maxLength must be non-negative.");
        return "";
    }

    // 将字符串转换为字符数组以正确处理表情符号等辅助平面字符
    const characters = Array.from(str);

    if (characters.length <= maxLength) {
        // 如果字符串长度小于或等于最大长度，则直接返回原字符串
        return str;
    }

    // 截取指定长度的字符数组
    const truncatedChars = characters.slice(0, maxLength);

    // 将字符数组重新拼接成字符串
    const truncatedStr = truncatedChars.join('');

    // 根据addEllipsis参数决定是否添加省略号
    return addEllipsis ? truncatedStr + '...' : truncatedStr;
}

// 示例用法
console.log(truncateString("这是一个非常非常长的文本，需要被截取。", 10));
// 输出: "这是一个非常..."

console.log(truncateString("短文本", 10));
// 输出: "短文本"

console.log(truncateString("带有😂表情符号的文本", 7));
// 输出: "带有😂表情符..." (正确处理表情符号)

console.log(truncateString("不加省略号的文本", 5, false));
// 输出: "不加省略"

console.log(truncateString("", 10));
// 输出: ""

console.log(truncateString("超出长度也不会加省略号", 5, false));
// 输出: "超出长度"

console.log(truncateString(null, 5)); // 警告并返回 ""

这个封装的函数考虑了以下几点：

• 输入校验： 检查输入是否为有效字符串和长度。
• 长度判断： 如果原字符串长度未超过截取长度，则直接返回原字符串，避免不必要的截取和省略号。
• Unicode兼容性： 使用 Array.from(str) 将字符串转换为字符数组，确保正确处理由代理对（surrogate pairs）组成的辅助平面字符（如表情符号），从而实现按“实际字符数”截取，而非按“UTF-16码元数”。
• 可选省略号： 允许通过参数控制是否在截取后添加省略号，增加了函数的灵活性。

怎么处理截取中的常见问题与最佳实践？

在实际应用中，除了核心的截取逻辑，我们还需要考虑一些常见问题和采取一些最佳实践来提升代码的健壮性和用户体验。

优雅地处理不足截取长度的情况

正如上面封装函数中所示，在执行截取操作之前，始终应该先判断原始字符串的长度是否已经小于或等于我们希望截取的最大长度。如果满足这个条件，就没有必要进行实际的截取操作，直接返回原始字符串即可。这样可以避免不必要的计算，并且防止在不该出现省略号的地方出现省略号。

const myString = "Hello";
const maxLength = 10;

if (myString.length <= maxLength) {
    console.log(myString); // 输出: "Hello"
} else {
    console.log(myString.slice(0, maxLength) + '...');
}

添加省略号(...)以示截断

当字符串因长度限制被截断时，在截取后的文本末尾添加一个省略号（...）是一种非常常见的用户体验实践。这能明确地告诉用户，这里显示的内容并非完整版，还有更多内容被隐藏。这有助于避免用户误解信息，并引导他们去查看完整内容。

需要注意的是：

• 如果原始字符串本身就未达到截取长度，则不应该添加省略号。
• 如果添加省略号，最终显示的字符数会是 maxLength + ellipsis.length。在某些严格限制显示空间的情况下，可能需要将 maxLength 减去省略号的长度，以确保最终显示的文本（包括省略号）不超过指定总长度。
  
  例如：如果要限制总长度为10个字符（包含省略号），那么实际截取的字符数应为 10 - 3 = 7 个。

function truncateWithEllipsis(str, maxLength) {
    const ellipsis = '...';
    const effectiveMaxLength = maxLength - ellipsis.length; // 实际截取长度要减去省略号的长度

    if (str.length <= maxLength) { // 如果原始长度未超过总限制，直接返回
        return str;
    }
    
    // 如果考虑Unicode字符，应使用Array.from
    const characters = Array.from(str);
    if (characters.length <= maxLength) {
        return str;
    }
    
    // 如果实际字符数超过了有效截取长度，则截取并添加省略号
    if (characters.length > effectiveMaxLength) {
        return characters.slice(0, effectiveMaxLength).join('') + ellipsis;
    }
    
    // 理论上不会走到这里，除非maxLength很小导致effectiveMaxLength为负
    return str; // 或者返回截取后的内容（不带省略号，因为不够放了）
}

console.log(truncateWithEllipsis("这是一个长文本的范例。", 10));
// 输出: "这是一个长..." (10 = 7个字 + 3个...)
console.log(truncateWithEllipsis("短", 10)); // 输出: "短"
console.log(truncateWithEllipsis("短文本😂", 8)); // 输出: "短文本😂..." (5个字符 + 3个...)

Unicode字符（如表情符号）的处理

正如“多少”部分所强调的，JavaScript的 .length 属性和标准的 slice()、substring() 方法是基于UTF-16码元进行操作的。这意味着对于由代理对组成的字符（如大部分表情符号和一些生僻字），一个视觉字符可能被算作两个码元。如果直接使用这些方法进行截取，可能会导致：

• 截断了表情符号，导致显示乱码或半个字符。
• 截取的实际字符数与预期不符。

最佳实践： 总是使用 Array.from(str) 将字符串转换为字符数组，然后对数组进行 slice() 操作，最后再 join('') 回来。这是处理Unicode字符最稳妥的方式。

选择合适的方法

• slice()：
  • 推荐： 行为最为清晰，支持负索引（虽然截取前几位用不上），且没有 substring() 那样参数自动调整的“惊喜”。在大多数场景下，它是首选。
• substring()：
  • 可用： 在截取前几位的场景下，它的表现与 slice(0, N) 几乎一致。但其参数自动调整的特性可能导致一些意外行为（虽然在 (0, N) 这种固定用法下不容易遇到）。
• substr()：
  • 避免使用： 已被标记为弃用。虽然语法上可能更直观（开始位置和长度），但为了代码的未来兼容性和避免潜在问题，应避免在新项目中使用。

综上所述，对于“截取字符串前几位”这一需求，结合对Unicode字符的考量，最推荐的实现方式是：

Array.from(str).slice(0, N).join('')。

代码可读性与维护

将字符串截取逻辑封装成一个具名函数（如上述的 truncateString），并提供清晰的参数命名和注释，可以大大提高代码的可读性和维护性。当业务逻辑发生变化时（例如，需要改变截取规则或省略号的样式），只需修改一处代码即可。

通过上述对“是什么”、“为什么”、“哪里”、“多少”、“如何”、“怎么”的详细探讨，相信您已经对JavaScript中截取字符串前几位的操作有了全面而深入的理解。掌握这些知识和最佳实践，将帮助您在前端开发中更高效、更健壮地处理字符串显示和数据处理的需求。