ES6 -- 模板字串使用方法

王小端coder發表於2019-04-10
字串

ES5輸出模板字串

我們在之前的ES5中使用javascript輸出模板字串的方法，通常是下面這樣。

例子：

<div id="string">
</div>
<script type="text/javascript">
    let name = '王小端coder';
    let age = 28;
    document.getElementById('string').innerHTML = 'My name is <b>' + name + '</b> and my age is <font color="green">' + age + '</font>';
</script>
複製程式碼

這樣的做法需要使用大量的""（雙引號）和+來拼接才能得到我們需要的模版。但是這樣是十分不方便的。

ES6輸出模板字串

現在使用ES6提供了模板字串，具體寫法如下

例子：

<div id="string">
</div>
<script type="text/javascript">
let name = '王小端coder';
let age = 28;
document.getElementById('string').innerHTML = `My name is <b>${name}</b> and my age is <font color="green">${age}</font>`;
</script>
複製程式碼

模板字串用`（反引號）標識，用${}將變數括起來。這樣寫出來就方便多了。

模板字串中的反引號的使用

由於反引號是模版字串的標識，如果我們需要在字串中使用反引號，我們就需要對其進行轉義。

例子：

<div id="string">
</div>
<script type="text/javascript">
let name = '王小端coder';
let age = 28;
document.getElementById('string').innerHTML = `My name\`s <b>${name}</b> and my age is <font color="green">${age}</font>`;
</script>
複製程式碼

注意看上面例子中的區別，將name is 修改為了 name `s

模板字串引用變數/引用表示式/引用方法

  • 引用變數

看上面例子裡面的name和age就是變數，在模板中使用了${}進行包圍就可以實現了變數的引用。

  • 引用表示式

例子：

<div id="string"></div>
<script type="text/javascript">
    document.getElementById('string').innerHTML = `${ 1 + 2 }`
</script>
複製程式碼

在${} 可以放置任意表示式

  • 引用方法
<div id="string"></div>
<script type="text/javascript">
    let name = '王小端coder';
    let age = 28;
    function fun() {
      return 'andmy age is';
    }
    document.getElementById('string').innerHTML = `My name\`s <b>${name}</b> ${fun()} <font color="green">${age}</font>`
</script>
複製程式碼

在${} 可以放置任意方法

模板字串的多行使用

<div id="string">
</div>
<script type="text/javascript">
let name = '王小端coder';
let age = 28;
document.getElementById('string').innerHTML = `My name\`s 
<b>${name}</b>
and my age is 
<font color="green">${age}</font>`;
</script>
複製程式碼

注意：如果使用模版字串表示多行字串，所有的空格和縮排都會被儲存在輸出中！！

模板字串巢狀

<div id="string"></div>
<script type="text/javascript">
    let name = '王小端coder';
    let age = 28;
    const tmp = `My name is ${name} and my age is ${`${age}`}`;
    document.getElementById('string').innerHTML = tmp;
</script>
複製程式碼

模板編譯

通過模板字串，生成正式模板的例項

例子：

<div id="string"></div>
<script type="text/javascript">
    let template = `<ul>
      <% for(let i = 0; i < data.supplies.length; i++) { %>
        <li><%= data.supplies[i] %></li>
      <% } %>
    </ul>`;
    let parse = eval(compile(template));
    document.getElementById('string').innerHTML = parse({ supplies: [ "broom", "mop", "cleaner" ] });

    function compile(template){
      const evalExpr = /<%=(.+?)%>/g;
      const expr = /<%([\s\S]+?)%>/g;
      template = template
        .replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`')
        .replace(expr, '`); \n $1 \n  echo(`');
      template = 'echo(`' + template + '`);';
      let script =
      `(function parse(data){
        let output = "";
        function echo(html){
          output += html;
        }
        ${ template }
        return output;
      })`;
      return script;
    }
</script>
複製程式碼

標籤模板

模板字串的功能，不僅僅是上面這些。它可以緊跟在一個函式名後面，該函式將被呼叫來處理這個模板字串。這被稱為“標籤模板”功能。標籤模板其實不是模板，而是函式呼叫的一種特殊形式。“標籤”指的就是函式，緊跟在後面的模板字串就是它的引數。

例子：

<script type="text/javascript">
    alert`王小端coder`;
</script>複製程式碼


相關文章