JS字符串拼接的几种常见方式总结
作者：D_jing20
前言
在 JavaScript 中，使用字符串连接有 几 种方式：连接符（+）、反引号（`）、join()、concat()。
一、使用连接符 “+” 把要连接的字符串连起来
let a = 'java' let b = a + 'script' //运行结果：javascript
说明：只连接100个以下的字符串建议用这种方法，最方便
二、使用模板字符串，以反引号（ ` ）标识
ES6中新增的字符串方法，可以配合反单引号完成拼接字符串的功能
反单引号怎么打出来：将输入法调整为英文输入法，单击键盘上数字键1左边的按键。
用法：
1： 定义需要拼接进去的字符串变量
2： 将字符串变量用${}包起来，再写到需要拼接的地方
注意：反单引号：` ；单引号：' 。不要用错了哟~
实例：
let a = 'java'
let b = `hello ${a}script`
//运行结果：hello javascript三、使用数组的 join() 方法连接字符串
定义和用法：
join() 方法将数组作为字符串返回。
元素将由指定的分隔符分隔。默认分隔符是逗号 (,)。
注释：join() 方法不会改变原始数组。
语法：
array.join(separator)
参数：
| 参数 | 描述 |
| separator | 可选。要使用的分隔符。如果省略，元素用逗号分隔。 |
返回值：
| 类型 | 描述 |
| String | 字符串值，表示数组值，由指定的分隔符分隔。 |
实例：
let arr = ['hello','java','script']
let str = arr.join(" ")
//运行结果：hello java scriptjoin('--') 这个是可以换的 换--就是用--拼接
四、使用 JavaScript的 concat() 方法连接字符串
定义和用法：
concat() 方法用于连接两个或多个字符串。
该方法没有改变原有字符串，但是会返回连接两个或多个字符串新字符串。
注释：concat() 方法不会修改原字符串的值，与数组的 concat() 方法操作相似。
语法：
string.concat(string1, string2, ..., stringX)
参数：
| 参数 | 描述 |
| string1, string2, ..., stringX | 必需。将被连接为一个字符串的一个或多个字符串对象。 |
返回值：
| 类型 | 描述 |
| String | 两个或多个字符串连接后生成的新字符串。 |
实例：
let a = 'java' let b = 'script' let str = a.concat(b) //运行结果：javascript
五、使用对象属性来连接字符串
function StringConnect(){
this.arr = []
}
StringConnect.prototype.append = function(str) {
this.arr.push(str)
}
StringConnect.prototype.toString = function() {
return this.arr.join("")
}
var mystr = new StringConnect()
mystr.append("abc")
mystr.append("def")
mystr.append("g")
var str = mystr.toString()
console.log(str);
//abcdefg或
function stringConnect(){
this._str_=[];
}
stringConnect.prototype.append=function(a){
this._str_.push(a);
}
stringConnect.prototype.toString=function(){
return this._str_.join();
}
var mystr=new stringConnect;
mystr.append("a");
var str=mystr.toString();
console.log(str);六、三种方法性能进行比较
利用下面代码对三种方法性能进行比较，通过更改 c 的值来调整连接字符串的个数
var str="";
var d1,d2;
var c=5000;//连接字符串的个数
//------------------------测试第三种方法耗费时间-------
d1=new Date();
function stringConnect(){
this._str_=new Array();
}
stringConnect.prototype.append=function(a){
this._str_.push(a);
}
stringConnect.prototype.toString=function(){
return this._str_.join("");
}
var mystr=new stringConnect;
for(var i=0;i<c;i++){
mystr.append("a");
}
str=mystr.toString();
d2=new Date();
console.log(d2.getTime()-d1.getTime());
//-----------------------------------------------------
//------------------------测试第二种方法耗费时间-------
d1=new Date();
var arr=new Array();
for(var i=0;i<c;i++){
arr.push("a");
}
str=arr.join("");
d2=new Date();
console.log(d2.getTime()-d1.getTime());
//-------------------------------------------------------
//------------------------测试第一种方法耗费时间-------
d1=new Date();for(var i=0;i<c;i++){
str+="a";
}
d2=new Date();
console.log(d2.getTime()-d1.getTime());
//-------------------------------------------------------我调整 c 分别等于5000、50000、500000、5000000，每个数值分别测了10次，最后结果如下：
c=5000 平均耗时（单位毫秒）
第三种 3 2 2 3 1 2 2 1 1 1 1.8
第二种 1 3 0 3 1 3 4 1 4 2 2.2
第一种 0 0 0 0 0 1 1 1 1 1 0.5
c=50000
第三种 22 12 9 14 12 13 13 13 10 17 13.5
第二种 8 13 12 8 11 11 8 9 8 9 9.7
第一种 7 12 5 11 10 10 10 13 16 12 10.6
c=500000
第三种 104 70 74 69 76 77 69 102 73 73 78.7
第二种 78 100 99 99 100 98 96 71 94 97 93.2
第一种 90 87 83 85 85 83 84 83 88 86 85.4
c=5000000
第三种 651 871 465 444 1012 436 787 449 432 444 599.1
第二种 568 842 593 747 417 747 719 549 573 563 631.8
第一种 516 279 616 161 466 416 201 495 510 515 417.5
统计5000000的时候在地址栏加入了随机参数，应该是避免了缓存的影响的。从结果来看，第一种方法并不比另2种方法消耗多，甚至还更有优势，这点和手册上的说明明显不一致。
测试系统：win 7旗舰
浏览器：chrome 52.0.2739.0 m
补充：javaScript 如何使用js追加字符串呢
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="">
<title>字符串追加的三种方式分享</title>
<script>
//www.jb51.net
//字符串追加演示
var a ="www.jb51.net";
//1： 在字符串后面追加一个字符
//1.1 使用concate函数,在字符串后面追加一个或多个字符
var b1 = a.concat("-123","-456");
//1.2 直接使用加号(+)
var b2 = a+"-456"+"-1234";
//2.在字符串前面加上一个字符串
var c1 ="123--"+a;
//3.在字符串任意位置插入字符串
//例: 在字符串的第4个字符位置插入123
var d1 = a.slice(0,4) + "第4位插入的字符串" + a.slice(4)
var d2 = a.slice(0,5).concat("第5位插入的字符串",a.slice(5))
document.write(b1);
document.write("<br />");
document.write(b2);
document.write("<br />");
document.write(c1);
document.write("<br />");
document.write(d1);
document.write("<br />");
document.write(d2);
</script>
</head>
<body>
</body>
</html>总结
到此这篇关于JS字符串拼接的几种常见方式的文章就介绍到这了,更多相关JS字符串拼接方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！