模板字符串

模板字符串是增強版的字符串，用反引號（`）標識，它可以當做普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變`In JavaScript '\n' is a line-feed.`

 

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
not legal.`

// 字符串中嵌入變量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`   // Hello Bob, how are you today?

 

上面代碼中，模板字符串都是用反引號表示，如果在模板字符串中需要使用反引號，則前面需要用反

斜杠轉義。

var greeting = `\`Yo\` World!`; // `Yo` World!

如果使用模板字符串表示多行字符串，則所有的空格、縮進和換行都會被保留在輸出中。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>

如果想把行首和行尾的換行、空格等去掉，則使用trim方法即可。

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());

模板字符串中嵌入變量，要將變量名寫在${}之中。大括號內可以放入任意的JavaScript表達式，可以進行運算，以及引入對象屬性。

var x = 1, y = 2;

`${x} + ${y} = ${x + y}`;
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`;
// "1 + 4 = 5"

var obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"

模板字符串之中還可以調用函數。

function func() {
    return 'Hello';
}

`${func()} World`;
// "Hello World"

如果大括號中的值不是字符串，則將按照一般的規則轉換為字符串。如若大括號中是一個對象，則將默認調用對象的toString方法，把對象轉換為字符串。

 

如果模板字符串中的變量沒有聲明，則會報錯。

// 變量place沒有聲明
var msg = `Hello, ${place}`;
// ReferenceError: place is not defined

模板字符串之間還可以進行嵌套：

var tmpl = addrs => `
    <table>
    ${addrs.map(addr => `
        <tr><td>${addr.first}</td></tr>
        <tr><td>${addr.last}</td></tr>
    `).join('')}
    </table>
`;

tmpl([{first:'a', last: 'b'}]);

// output:
/*"
    <table>

        <tr><td>a</td></tr>
        <tr><td>b</td></tr>

    </table>
"*/

更詳細請查看原文鏈接

————————————————
版權聲明：本文為CSDN博主「Amy_home」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/blog_szhao/article/details/51792868