一.前言

JavaScript中的模板字符串（Template Strings），也称为模板字面量，是一种方便创建多行字符串和插入表达式的方式。使用模板字符串可以将变量、表达式或函数嵌入到字符串中，而无需使用字符串连接操作符（+）。模板字符串使用反引号（`）作为字符串的定界符，而不是单引号或双引号。

二.模板字符串的使用

1.介绍

模板字符串

使用反引号 `` 作为字符串的标识

在模板字符串中使用变量，使用方法是${变量名}

模板字符串对比传统字符串拼接在写法上和功能上都有明显优势

 let username = '岳飞'
    let age = 36
    let story = '打败金兀术'

    let str = '姓名:'+username+'年龄:'+age+'事迹:'+story
    console.log(str);
    /*
    模板字符串
    使用 反引号 `` 作为字符串的标识
    在模板字符串中使用变量，使用方法是${变量名}
    */ 
    let str1 = `姓名: ${username}，年龄: ${age}，事迹：${story}`
    console.log(str1);

2.模板字符串支持换行

    /*模板字符串 支持换行*/

    let str2 = `
        姓名:${username}
        姓名:${age}
        事迹:${story}
    `
    console.log(str2)

模板字符串更适合元素写入

在JavaScript中，使用字符串拼接进行换行可能会导致错误（或使用转义符（\n）插入换行符比较麻烦），但使用模板字符串则不会出现此问题。而且，通过使用模板字符串和innerHTML属性可以实现换行效果。相比之下，模板字符串对于代码的可读性和容错性都更高。

innerHTML模板字符串写法

  let btn = document.getElementById('btn')
    let list = document.getElementById('list')

    btn.onclick = function(){
        let html = ''
        for (let i = 0; i < 10; i++) {
           html += `
        <li>
            <h1>${username}</h1>
            <p>${age}</p>
            <p>${story}</p>
        </li>
           `
            
        }
        list.innerHTML = html
    }

3.模板字符串中，可以运行表达式

  /*
    模板字符串中，可以运行表达式
    */
   let str3 = `1+1=${1+1}`
   console.log(str3);

   let str4 = `同时天涯沦落人，${3>4? '莫愁前路无知己':'从此消亡是路人'}`
   console.log(str4);

4.模板字符串中可以运行函数

/*
模板字符串中可以运行函数
*/    
function show(){
    return '莫愁前路无知己'
}
let str5 = `${show()},凭君传语报平安`
console.log(str5);

三.总结

模板字符串和字符串拼接都用于创建字符串，但它们在语法和功能上有一些区别。下面是模板字符串和字符串拼接的对比总结：

语法：

字符串拼接使用加号（+）或concat等方法来连接多个字符串。
模板字符串使用反引号（）作为定界符，并使用占位符${}`插入变量、表达式或函数调用。

多行字符串：

字符串拼接需要使用换行符和字符串连接操作符来创建多行字符串，或者使用转义符（\n）插入换行符。
模板字符串直接支持多行字符串，无需使用换行符或连接操作符，可以保留字符串中的换行符和缩进。

变量插值：

字符串拼接需要将变量通过加号或其他方法与字符串连接起来。
模板字符串可以在占位符${}中直接插入变量、表达式或函数调用，并与其他字符串内容无缝搭配。

代码可读性：

字符串拼接可能会造成较长、难以阅读和维护的代码，尤其是在含有大量变量或复杂逻辑的情况下。
模板字符串提供了更清晰、更易读的语法，将变量直接嵌入字符串中，使代码更易于理解和修改。

容错性：

字符串拼接容易出现遗漏加号或出错的情况，特别是在复杂的拼接操作中。
模板字符串在插入变量或表达式时更直观且容易检查，并且避免了常见的错误。