js模板字符串使用方法（js模板字符串）
模板字符串（模板字面量）
ES6 中引入了模板字符串 ，让我们省去了字符串拼接的烦恼 。下面一起来看看它的特性 。
在模板字符串中插入变量
以前 ，让字符串进行拼接的时候 ，是这样做的：（传统写法的字符串拼接）
var name = smyhvae; var age = 26; console.log(name: + name + ,age: + age); //传统写法这种写法 ，比较繁琐 ，而且容易出错 。
现在 ，有了 ES6 语法 ，字符串拼接可以这样写：
var name = qianguyihao; var age = 26; console.log(我是 + name + ,age: + age); //传统写法 console.log(`我是${name},age:${age}`); //ES6 写法 。注意语法格式注意 ，上方代码中 ，倒数第二行用的符号是单引号 ，最后一行用的符号是反引号（在 tab 键的上方） 。
参考链接：
ES6 的 rest 参数和扩展运算符在模板字符串中插入表达式
以前 ，在字符串中插入表达式的写法必须是这样的：
const a = 5; const b = 10; console.log(this is + (a + b) + and\nnot + (2 * a + b) + .);现在 ，通过模板字符串 ，我们可以使用一种更优雅的方式来表示：
const a = 5; const b = 10; // 下面这行代码 ，故意做了换行 。 console.log(`this is ${a + b} and not ${2 * a + b}.`);打印结果：
this is 15 and not 20.模板字符串中可以换行
因为模板字符串支持换行 ，所以可以让代码写得非常美观 。
代码举例：
const result = { name: qianguyihao, age: 28, sex: 男, }; // 模板字符串支持换行 const html = `<div> <span>${result.name}</span> <span>${result.age}</span> <span>${result.sex}</span> </div>`; console.log(html); // 打印结果也会换行打印结果：
模板字符串中可以调用函数
模板字符串中可以调用函数 。字符串中调用函数的位置 ，将会显示函数执行后的返回值 。
举例：
function getName() { return qianguyihao; } console.log(`www.${getName()}.com`); // 打印结果：www.qianguyihao.com模板字符串支持嵌套使用
const nameList = [千古壹号, 许嵩, 解忧少帅]; function myTemplate() { // join() 的意思是 ，把数组里的内容合并成一个字符串 return `<ul> ${nameList.map((item) => `<li>${item}</li>`).join()} </ul>`; } document.body.innerHTML = myTemplate();效果如下：
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！