JavaScript字符串截取与拼接基础示例

一、字符串的核心机制：不可变性与字符索引

在 JavaScript 中，字符串类似于字符的有序只读序列。每一个字符都有其对应的位置编号，称作索引（Index）。正向索引从 0 开始递增，指向字符串的首个字符；而现代 JavaScript 针对部分方法（如 slice）还支持以负数形式从尾部向前索引，-1 即代表最后一个字符。

需要牢记的是：字符串在内存中一旦创建，其内部内容便不可覆写。当我们调用截取或拼接方法时，必须声明变量接收其返回值，否则操作结果将被丢弃。

图 1 说明：字符串截取标准区间均遵循“左闭右开”规则，即包含起始索引位置字符，但不包含终止索引字符。

二、字符串截取的核心方法与实战示例

在 JavaScript 中，截取字符串有三个最常用的方法：slice()、substring() 以及 split()。它们各自有着明确的适用场景和参数解析差异。

1. slice(startIndex, endIndex)：推荐的首选截取方法

slice() 是功能最全面、规则最直观的截取方式。它接收两个参数：起始索引 startIndex 和结束索引 endIndex（可选）。其关键特性如下：

• 左闭右开：提取范围包含 startIndex，但不包含 endIndex。
• 省略结束索引：如果省略第二个参数，则默认截取到字符串末尾。
• 支持负数：若传入负数，系统会自动将其加上字符串长度（即 str.length + index），代表从末尾倒数计算。

const greeting = "JavaScript";

// 1. 基础正向截取：获取前 4 个字符 [0, 4)
const sub1 = greeting.slice(0, 4);
console.log(sub1); // 输出: "Java"

// 2. 省略结束参数：从索引 4 截取至末尾
const sub2 = greeting.slice(4);
console.log(sub2); // 输出: "Script"

// 3. 负数索引：提取倒数后 6 个字符
const sub3 = greeting.slice(-6);
console.log(sub3); // 输出: "Script"

// 4. 起始与结束皆为负数：提取倒数第 6 到倒数第 2 个字符（不含倒数第2）
const sub4 = greeting.slice(-6, -2);
console.log(sub4); // 输出: "Scri"

2. substring(startIndex, endIndex)：非负索引的安全截取

substring() 早期被广泛使用，其行为与 slice() 类似，但有两个特殊逻辑处理：

• 自动调换大小顺序：若 startIndex > endIndex，该方法会自动互换两个参数，例如 str.substring(5, 2) 等价于 str.substring(2, 5)。
• 负数与 NaN 视为 0：任何小于 0 的参数或非法数字都会被当做 0 处理，不支持从末尾倒数定位。

const title = "FrontendGuide";

// 正常截取
console.log(title.substring(0, 8)); // 输出: "Frontend"

// 特性1：参数自动互换 (8 > 0 会自动变成 substring(0, 8))
console.log(title.substring(8, 0)); // 输出: "Frontend"

// 特性2：负数均被当作 0 处理，相当于 title.substring(0, 8)
console.log(title.substring(-5, 8)); // 输出: "Frontend"

3. split(separator, limit)：按分隔符拆分后定位截取

严格来说，split() 是根据指定的分隔符将字符串拆分为数组的方法。但在需要截取诸如文件扩展名、URL查询参数或逗号分隔数据时，它往往比计算下标更直接高效。

const filename = "avatar.backup.png";

// 拆分为数组: ["avatar", "backup", "png"]
const parts = filename.split(".");

// 提取最后一个元素作为文件扩展名
const ext = parts[parts.length - 1];
console.log(ext); // 输出: "png"

图 2 说明：日常开发中绝大多数需求推荐优先采用 slice()；当面对具有特征分隔符的文本时，使用 split() 更加直截了当。

三、字符串拼接的三大常用方式

在获取或构建了局部字符串片段后，往往需要将其与其他动态变量或固定标识结合起来。JavaScript 提供了以下几种拼接途径：

1. 模板字符串（Template Literals）：现代代码首选

ES6 引入的模板字符串采用反引号（` `）包裹，通过 ${expression} 嵌入任意变量或 JavaScript 表达式。它是当前最推荐的拼接方式，彻底解决了传统字符串拼接嵌套单双引号混乱、换行繁琐的问题。

const user = "张三";
const score = 95;

// 基础变量嵌入与直接运算
const report = `学员: ${user}，考试得分: ${score}，评定: ${score >= 90 ? "优秀" : "合格"}`;
console.log(report);
// 输出: "学员: 张三，考试得分: 95，评定: 优秀"

// 原生多行字符串支持
const cardHtml = `
  <div class="card">
    <h3>${user}</h3>
    <span>${score}</span>
  </div>
`;

2. 加号运算符 + 与 +=

使用 + 运算符进行拼接是 JavaScript 最原始的方式。对于少量字面量的快速组合非常方便，但需格外注意隐式类型转换带来的隐患。

const prefix = "KuAi";
const suffix = "Framework";
const full = prefix + "-" + suffix;
console.log(full); // 输出: "KuAi-Framework"

// 注意：+ 遇上数字时的隐式转换
const num1 = 10;
const num2 = 20;
console.log("总计：" + num1 + num2);   // 输出: "总计：1020"（字符串与数字相加被转为拼接）
console.log("总计：" + (num1 + num2)); // 输出: "总计：30"（加括号优先运算）

3. 数组 join() 方法

当需要将一个数组或列表中的大量字符串元素组装为一个整体，并在每两个元素之间加入固定连接符时，join() 是最优雅且高效的工具。

const tags = ["JavaScript", "前端基础", "字符串"];
const tagString = tags.join(" | ");
console.log(tagString); // 输出: "JavaScript | 前端基础 | 字符串"

图 3 说明：在日常代码书写中，模板字符串是兼顾开发效率与可读性的最佳解法。

四、综合实战案例：截取与拼接协同运用

案例 1：手机号敏感数据掩码脱敏

在用户中心等界面中，常需要展示形如 138****5678 的脱敏号码。这需要截取前 3 位与后 4 位，并用星号拼接：

function maskPhoneNumber(phone) {
  // 参数防御性检查
  if (!phone || phone.length !== 11) return phone;
  
  // 截取前 3 位 [0, 3)
  const start = phone.slice(0, 3);
  // 截取后 4 位 (利用负数索引)
  const end = phone.slice(-4);
  
  // 利用模板字符串优雅拼接
  return `${start}****${end}`;
}

console.log(maskPhoneNumber("13812345678")); // 输出: "138****5678"

案例 2：安全提取文件后缀并重新命名

在文件上传时，通常需要保留原有的扩展名，并配合时间戳拼接生成唯一的新文件名：

function generateUploadName(originalName) {
  // 寻找最后一个点的索引
  const lastDotIndex = originalName.lastIndexOf(".");
  if (lastDotIndex === -1) return originalName; // 无扩展名直接返回
  
  // 截取包含点及其后面的扩展名
  const ext = originalName.slice(lastDotIndex);
  const uniqueId = Date.now();
  
  // 拼接输出
  return `upload_${uniqueId}${ext}`;
}

console.log(generateUploadName("document.final.pdf")); // 输出类似于: "upload_1719283749123.pdf"

五、核心知识点与开发实践速查

图 4 说明：牢记“左闭右开、支持负数、首选模板、接收结果”四句话，即可避开字符串操作的大部分陷阱。

六、总结

掌握 JavaScript 中的字符串操作并不复杂，关键在于形成清晰的方法选择习惯：

• 截取时：默认无脑选用 slice()，它遵循标准的左闭右开规范且支持负向索引；遇到特定字符分隔的场景，优先使用 split()。
• 拼接时：默认无脑选用 ES6 模板字符串 `${}`，语法干净清晰，杜绝隐式转换和引号嵌套 bug。
• 牢记结果接收：所有方法均不改变原始字符串，务必妥善保存返回的新字符串。