大家好，欢迎来到IT知识分享网。

ES5中的字符串拼接场景

//字符串的拼接和换行都需要借助+ 和\n才能实现，很麻烦更容易出错 var str = '第一行内容\n' + '第二行内容\n' + '第三行内容\n'; console.log(str); /** 第一行内容 第二行内容 第三行内容 */ <div id="test"></div> <script type="text/javascript"> let lang = 'ES6'; document.getElementById('test').innerHTML = '<h1>学习' + lang + ' Wiki</h1>' + '<p>文案文案</p>' + '<div>主要内容内容</div>'; </script>

模版字符串的使用

有了模版字符串后就不需要使用加号了，通过使用 ““（反引号）中直接定义多行字符串和变量的拼接。如果是变量就包裹在 ${} 的大括号中。

在编译的过程会直接替换对应的变量。这种方式很明了地表达了字符串的完整性，更加直观地表达字符串的含义。

//单行 var name = '芳小芳'; var lang = 'ES6'; console.log(`这是${name}的${lang}笔记本！`); //多行 <div id="test"></div> <script type="text/javascript"> let lang = 'ES6'; document.getElementById('test').innerHTML = `<h1>{lang}Wiki</h1> <p>文案文案</p> <div>Wiki主要内容</div>`; </script> //逻辑运算 var a = 1; var b = 2; // ES5 console.log('a + b 的和是: ' + (a + b)); // a + b 的和是: 3 // ES6 console.log(`a + b 的和是: ${a + b}`); // a + b 的和是: 3 var age = 16; console.log(`小明是${age > 18 ? '成年人' : '未成年人'}`) // 小明是未成年人

带标签的模版字符串

带标签的模版字符串可以把模版字符串的内容当作参数传递到函数中，进行复杂的逻辑。

//ES5 var age = 10; var str = '' if (age > 18) { str = age + '岁成年了'; } else { str = age + '岁还未成年'; } console.log('芳小芳今年' + str); // 芳小芳今年10岁还未成年 //ES6 var age=6; function isAdult(strArr, age) { var s1 = strArr[0]; // strArr是字符串被变量分割后的数组 var str = '' if (age > 18) { str = age + '岁成年了'; } else { str = age + '岁还未成年'; } return `${s1}${str}`; } var test = isAdult`芳小芳今年${age}` console.log(test); //芳小芳今年6岁还未成年