ES6系列之模板字符串

模板字符串是ES6中很是重要的一個新特性，這個特性使得處理相關業務變得更加容易。

基礎用法

let a = `hello world`;
console.log(a); // hello world

注意這裏不是雙引號，而是反撇號`

在模板字符串中，還能夠拼接html元素，同時空格、縮進、換行都會被保留，而且若是模板字符串中的變量沒有聲明，將報錯。

let str = `
    <div>
        <ul>
            <li>11</li>
            <li>22</li>
        </ul>
    </div>
`;

上面代碼中，<div>標籤前面會有一個換行。若是你不想要這個換行，能夠使用trim方法消除它。

let str = `
    <div>
        <ul>
            <li>11</li>
            <li>22</li>
        </ul>
    </div>
`.trim();
console.log(str);

在模版字符串內使用反引號`時，須要在它前面加轉義符\

let a = `hello \\n`;
console.log(a);

嵌入變量

let name = 'jacky';
let str = '我叫' + name + '，你們好';
console.log(str); // 我叫jacky，你們好

當有變量參與拼接時，ES5下必須用+號這樣的形式進行拼接，這樣很麻煩並且很容易出錯。
ES6新增了字符串模版，能夠很好的解決這個問題。這時再引用str變量就須要用${name}這種形式了。

let name = 'jacky';
let str = '我叫${name}，你們好';
console.log(str); // 我叫jacky，你們好

若是大括號內部是一個字符串，將會原樣輸出：

let world = '666';
let a = `hello ${'world'}`;
console.log(a); // hello world

對運算的支持

在${}裏面，能夠寫任意的JS表達式，好比咱們用它進行運算

let a = 1;
let b = 2;
let c = `${a+b}`;
console.log(c); //3

let obj = { x: 1, y: 2 };
console.log(`${obj.x + obj.y}`); // 3

模板字符串調用函數

function fn() {
    return "Hello World";
}
console.log(`foo ${fn()} bar`); // foo Hello World bar