2017-07-06

常见字符串拼接方式(JS篇)

前言

在js中经常把两个或多个字符串拼接在一起，常见的”+”，”join”,”\”,”concat”,”`”五种方式，下面一起来看看用法及评测。（本文只做简单整理归纳）

用连接符“+”把要连接的字符串连起来

用法：
利用“+”把需要连接的字符串连起来

例如：

var key='left: 0;'+
    'padding-left: 5px;';
	key+='font-size: 16px;';
	console.log(key);

效果：

1	left: 0;padding-left: 5px;font-size: 16px;

PS：毫无疑问，这种方法是最便捷快速的，如果只连接100个以下的字符串建议用这种方法最方便，有个不好的地方，常常会因为少写或者多写引号而出错，而且这种出错不易察觉

以数组作为中介用 join 连接字符串

用法：
join() 方法用于把数组中的所有元素放入一个字符串

例如：

var a=" padding-left: 5px;font-size: 16px;"
var b="color: #fff;background-image: ";
var arr=new Array();
arr.push(a);
arr.push(b);
var str=arr.join("");
console.log(str);

效果：

1	padding-left: 5px;font-size: 16px;color: #fff;background-image:

PS：w3school 网站介绍说这种方法要比第一种消耗更少的资源，处理大量字符串拼接速度快, 原理在调用join()方法时才发生连接操作

使用转义字符”\”

用法：
在每一行的最后，都加上转义斜线\

例1：

var key='left: 0;\
    padding-left: 5px;\
	font-size: 16px;\
    color: #fff;\
    background-image: ';
console.log(key);    
```    
效果：
```javascript
left: 0;    padding-left: 5px;	font-size: 16px;    color: #fff;    background-image:

例2：

var html='\
<h1>\
js字符串拼接\
</h1>\
<a href="javascript:;" onclick="alert(\'js转义\')">js转义使用</a>\
<br/>\
hello \'world\'\
';
console.log(html);

效果：

1	<h1>js字符串拼接</h1><a href="javascript:;" onclick="alert('js转义')">js转义使用</a><br/>hello 'world'

还是上面的例子，在<br/>\后面加个空格试试，如图：

1	Uncaught SyntaxError: Invalid or unexpected token

PS:在字符串中，”\”转义符可以将回车转义掉（也就是回车符不存在了），但是不能将制表符，以及空格字符转义（它们是存在的），所以在使用的时候注意空格、回车符。

使用字符串的concat函数

用法：
concat() 方法用于连接两个或多个字符串

例如：

1
2
3

var str1="Hello "
var str2="world!"
document.write(str1.concat(str2))

效果：

1	Hello world!

PS：W3school的提示，使用 “ + “ 运算符来进行字符串的连接运算通常会更简便一些。

使用es6模版字符串方法

用法：
使用键盘1左边的字符拼接

例如：

var key=`left: 0;
    padding-left: 5px;
	font-size: 16px;
    color: #fff;
    background-image: `;
console.log(key);
var str1 = 'hello';  
console.log(`${str1} world`);  
  
var a = 10;  
var b = 20;  
console.log(`a+1=${a+1};b*2=${b*2}`);

效果：

left: 0;
    padding-left: 5px;
	font-size: 16px;
    color: #fff;
    background-image: 
hello world
a+1=11;b*2=40

PS:由上可以看出模版字符串换行不用加号拼接，可以用${}传入变量，可以进行数字的运算
在兼容性方面：服务器端， io.js 支持浏览器端， FF34+ , chrome 41+
移动端 IOS 8, Android 4.4IE Tech Preview

结语

关于性能测评可以参考
JS中三种字符串连接方式及其性能比较
 拼接字符串的方法及性能比较
从性能测评当中“+”并不会比join慢多少，甚至更好用，第三、第五未测试，感兴趣的同学可以
自行测试。很多人说ES6的模版字符串用的很爽，若不考虑兼容性的话，简直不要太爽，谁用谁知道。在此只做一个简单归纳，仅为个人意见，到底如何有待进一步验证！！！

赏

纯属好玩