JS怎么在字符串中加字符：+运算符与concat方法

一、基础原理：字符串不可变性与“加字符”的本质

在深入具体语法前，首先必须明确一个核心特征：JavaScript 中的字符串是不可变（Immutable）的基本数据类型。这意味着一旦字符串在内存中被创建，它的字符序列和长度就永远无法被直接修改。

很多初学者会尝试通过下标索引直接给字符串赋值，例如：

let text = "hell";
text[4] = "o"; // 尝试在末尾直接添加字符
console.log(text); // 仍然输出 "hell"，赋值被静默忽略（在严格模式下甚至会报错）

在 JavaScript 引擎中，字符串不能像数组那样直接通过索引扩容或修改内部元素。因此，无论使用 + 运算符还是 concat() 方法，底层的运作方式都是：读取原字符串的内容，加上新传入的字符，在内存中重新开辟一块空间存放计算后的完整内容，最后返回这个新字符串。如果想要保留改动，必须用变量接收这个新的返回值。

二、最常用的方式：+ 运算符

在日常开发中，+ 运算符是给字符串添加字符最常用的方式。其语法直观，符合数学直觉，既可以在末尾加字符，也可以在开头加字符。

1. 末尾追加与开头添加

直接将已有字符串变量与待添加字符用 + 相连即可。如果是在原变量基础上做累加，可以使用复合赋值运算符 +=：

// 1. 在末尾追加字符
let greeting = "Hello";
greeting = greeting + "!"; // 得到 "Hello!"

// 简写形式：使用 +=
let word = "Java";
word += "Script"; // 得到 "JavaScript"

// 2. 在开头添加字符
let filename = "index.html";
let fullPath = "/" + filename; // 得到 "/index.html"

2. 核心细节：+ 运算符的隐式类型转换规则

+ 运算符在 JavaScript 中同时承担“数值加法”和“字符串拼接”双重任务。这就引出了必须掌握的类型转换规则：只要 + 的两个操作数中有一个是字符串，JavaScript 就会将另一个操作数隐式转换为字符串，然后执行字符串连接。

看下面的具体表现：

let count = 10;
let message = "已完成：" + count; // 数字 10 被转为 "10"，结果为 "已完成：10"

let flag = true;
let str = "状态：" + flag; // 布尔值转为 "true"，结果为 "状态：true"

let empty = "值是：" + null; // 得到 "值是：null"
let undef = "值是：" + undefined; // 得到 "值是：undefined"

console.log(1 + 2 + " items"); // 输出 "3 items"（1+2 先算出 3，再与字符串拼接）
console.log("Total: " + 1 + 2); // 输出 "Total: 12"（"Total: " + 1 变成 "Total: 1"，再加 2 变成 "Total: 12"）
console.log("Total: " + (1 + 2)); // 输出 "Total: 3"（通过括号保证数学运算优先）

三、标准内置方法：String.prototype.concat()

除了使用运算符，JavaScript 字符串原型上还提供了一个专门用于合并字符的方法：concat()。它的设计目的非常纯粹，就是为了拼接字符串。

1. 基本语法与调用方式

concat() 接收一个或多个参数，将所有参数按顺序追加到调用该方法的字符串末尾，并返回拼接后的新字符串：

let base = "User";
let result = base.concat("_", "Admin", "_", "01");
console.log(result); // 输出 "User_Admin_01"
console.log(base);   // 原字符串依然是 "User"，不受影响

2. concat() 的参数处理机制

与 + 运算符相比，concat() 具有以下明确的行为特征：

• 自动类型转换：传给 concat() 的所有非字符串参数，都会被内部隐式调用 toString() 转换成字符串。例如 "".concat(1, true, null) 会得到 "1truenull"。
• 调用主体必须为非空值：因为 concat 是原型方法，必须挂载在具体实例上。如果变量本身是 null 或 undefined，直接调用 null.concat("a") 会抛出 TypeError: Cannot read properties of null (reading 'concat')。而 null + "a" 则可以安全返回 "nulla"。
• 链式调用：因为返回的是标准字符串，它可以无缝进行方法链式调用，例如 str.concat("!").trim().toLowerCase()。

四、进阶场景：如何在字符串中间指定位置插入字符

在实际业务中，“在字符串中加字符”往往不仅局限于开头或末尾，更常见的需求是在字符串中间某个指定索引位置插入字符（例如把电话号码 "13800000000" 格式化为 "138-0000-0000"）。

JavaScript 的 String 原型中并没有提供内置的 insert() 方法。要实现中间插入，通用且标准的做法是利用 slice() 截取前后两段，再通过 + 或 concat() 将待插入的字符组装在一起。

1. 核心公式与切片逻辑

假设我们要在索引为 index 的位置插入字符 char：

• 前半部分：str.slice(0, index)（截取从索引 0 到 index 之前的所有字符）
• 待插入字符：char
• 后半部分：str.slice(index)（截取从 index 开始直到末尾的所有字符）

2. 分别用 + 和 concat 实现

用 + 运算符拼接：

function insertWithPlus(str, index, char) {
  return str.slice(0, index) + char + str.slice(index);
}

let original = "ABEF";
let result = insertWithPlus(original, 2, "CD");
console.log(result); // 输出 "ABCDEF"

用 concat() 方法拼接：

function insertWithConcat(str, index, char) {
  return str.slice(0, index).concat(char, str.slice(index));
}

let filename = "document.pdf";
// 在扩展名前插入版本标识
let dotIndex = filename.lastIndexOf(".");
let newFilename = insertWithConcat(filename, dotIndex, "_v1.0");
console.log(newFilename); // 输出 "document_v1.0.pdf"

五、两种方式的对比与开发选型

既然 + 运算符与 concat() 都能给字符串加字符，在具体工程代码中该如何抉择？我们可以从语法、性能、边界处理三个维度来建立清晰的选择依据：

六、生产环境中的注意事项与常见误区

1. 不要在循环体中滥用多次单字符拼接处理大文本：在极高频循环（例如几万次循环）中做 str += ch，虽然现代引擎会通过绳树（Ropes / ConsString）结构尽量延缓实际的内存拷贝，但在超大数据量下依然容易导致内存驻留。针对超大文本构建，建议收集到数组中使用 array.join('')。而在常规业务（几十到数百次）中，+= 性能完全绰绰有余且代码最简单。
2. 警惕空指针异常：如前所述，concat() 必须在有效的字符串实例上调用。如果接口返回的数据可能是 null 或 undefined，直接写 apiData.concat("-end") 会直接抛出运行时异常引发页面崩溃。如果无法保证数据一定存在，应优先使用 (apiData || "") + "-end" 或可选链 apiData?.concat("-end")。
3. 涉及 Emoji 等复合字符时的截断问题：JavaScript 字符串的 slice() 和索引是基于 UTF-16 码元（Code Units）计算的。很多 Emoji 表情（如 😄）占 2 个码元。在指定位置插入字符时，如果切片索引恰好落在 Emoji 的高低代理项中间，会导致字符被破坏并显示为乱码（如 ）。对于包含 Emoji 或特殊符号的字符串，切片时建议使用 Array.from(str) 展开为字符数组，或者借助 Intl.Segmenter 按视觉字素簇（Grapheme Cluster）进行安全分割。