在开发中，字符串拼接是非常常见的操作，而JavaScript则是非常强大的语言，因此JavaScript字符串拼接也是应用最广泛的技术之一。本篇文章从不同的方面对JavaScript字符串拼接进行探究。
一、常规字符串拼接
常规字符串拼接是指直接将多个字符串用加号（+）连接起来。比如：
var name = "张三"; var age = 18; var message = name + "今年" + age + "岁了。"; console.log(message);
输出结果为：
张三今年18岁了。
这种拼接方式比较简单粗暴，虽然代码简单易懂，但是随着拼接的字符串数量和长度的增加，会导致代码可读性变差，也会影响性能。
二、数组字符串拼接
为了解决常规字符串拼接的问题，我们可以使用数组字符串拼接的方式。
var names = ["张三", "李四", "王五"];
var message = names.join("、") + "都是好朋友。";
console.log(message);
输出结果为：
张三、李四、王五都是好朋友。
这种方式可以将需要拼接的字符串按照一定的规则放入数组中，使用数组的join()方法将它们连接起来。相比于常规字符串拼接，这种方式代码可读性更好，也更为简洁，同时也可以提高性能。
三、+号拼接与模板字符串拼接的性能比较
+号拼接与模板字符串拼接都是常见的字符串拼接方式，但它们的性能有所不同。
下面是一个简单的性能测试（测试环境：Chrome 83）：
var count = 1000000;
console.time("plus");
var str = "";
for (var i = 0; i < count; i++) {
str += i;
}
console.timeEnd("plus");
console.time("template");
var str = "";
for (var i = 0; i < count; i++) {
str = `${str}${i}`;
}
console.timeEnd("template");
输出结果为：
plus: 55.233ms
template: 73.632ms
可以看到，使用+号拼接的方式比模板字符串拼接更快。
但是需要注意的是，随着字符串的长度增加，+号拼接的性能将逐渐下降。因此在长度较大的字符串拼接中，模板字符串拼接则是更好的选择。同时，模板字符串拼接的代码可读性更高，也更方便。
四、模板字符串拼接的特殊用法
在使用模板字符串拼接时，我们可以利用它的一些特殊用法，更加灵活地进行拼接操作。
1、在模板字符串中可以使用表达式，比如：
var a = 2;
var b = 3;
console.log(`a + b = ${a + b}`);
输出结果为：
a + b = 5
通过表达式，我们可以动态地计算字符串中的值，并将其插入其他字符串中。
2、可以在模板字符串中使用函数，例如：
function getMessage(name) {
return `你好，${name}！`;
}
console.log(getMessage("张三"));
输出结果为：
你好，张三！
通过函数，我们可以将一些计算逻辑独立出来，通过模板字符串进行拼接，从而提高代码可读性。
五、结合ES6的字符串扩展
在ES6中，JavaScript新增了一些字符串扩展，可以更加方便地进行字符串相关的操作。
1、repeat()方法：重复一个字符串
var str = "hello "; console.log(str.repeat(3));
输出结果为：
hello hello hello
2、startsWith()和endsWith()方法：判断字符串是否以某个子串开始或结束
var name = "张三";
console.log(name.startsWith("张"));
console.log(name.endsWith("三"));
输出结果为：
true
true
3、includes()方法：判断字符串中是否包含某个子串
var message = "今天天气真好，阳光明媚！";
console.log(message.includes("天气"));
输出结果为：
true
通过ES6的字符串扩展，我们可以更加方便地进行字符串相关的操作。
六、总结
通过本篇文章的探究，我们了解到了多种JavaScript字符串拼接的方式和特点，其中的一些方法或技巧可以加快拼接速度，提高代码可读性，同时也为我们提供了更多方便快捷的操作方式。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/181361.html
微信扫一扫 
支付宝扫一扫 