模板字符串(Template String)

changfeng1050 發布于2019-08-20 18:12 / 903人閱讀

摘要：如果使用模板字符串表示多行字符串，則所有的空格縮進和換行都會被保留在輸出中。模板字符串中嵌入變量，要將變量名寫在之中。變量沒有聲明模板字符串之間還可以進行嵌套。上面代碼中，模板字符串前面有一個標識名，它是一個函數。

語法

模板字符串(Template String)是增強版的字符串，用反引號(`)標識，它可以當作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。

用法

// 普通字符串
`In JavaScript "
" 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(`

  first
  second

`);

上面代碼中，所有模板字符串的空格和換行都是被保留的，比如

$("#list").html(`

  first
  second

`.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 => `
    
    ${addrs.map(addr => `
        
    `).join("")}
    ${addr.first}
        ${addr.last}
`;

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

// output:
/*"
    

        a
        b

    
"*/

如果需要引用模板字符串本身，在需要時執行，可以像下面這樣寫。

// 寫法一
var str = "return " + "`Hello ${name}!`";
var func = new Function("name", str);
func("Amy");    // "Hello Amy!"

// 寫法二
var str = "(name) => `Hello ${name}!`";
var func = eval.call(null, str);
func("Amy");    // "Hello Amy!"

標簽模板

模板字符串的功能，不僅是上面那些，它還可以緊跟在一個函數后面，該函數將被調用來處理這個模板字符串，這種稱為“標簽模板”功能(Tagged template)。

標簽模板函數第一個參數是字符串模板的常量數組，后面的每一個參數為表達式的計算結果，函數名稱可以任意指定。下面是一個例子：

var a = 5, b = 10;

function tag(strings, ...values) {
    console.log(strings[0]);    // "Hello "
    console.log(strings[1]);    // " world"
    console.log(strings[2]);    // ""
    console.log(values[0]);     // 15
    console.log(values[1]);     // 50

    return "Anything";
}

tag`Hello ${a + b} world ${a * b}`;
// Anything
alert`123`
// 等同于
alert(123)

標簽模板其它是一種特殊的函數調用形式，“標簽”指的就是函數，緊跟在后面的模板字符串就是它的參數。

var a = 1,
    b = 2;

tag`Helo ${a + b} world ${a * b}`;

上面代碼中，模板字符串前面有一個標識名tag，它是一個函數。

GPU云服務器云服務器字符串String template wpf?style?template art_template

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84195.html

go html/template 模板的使用實例

摘要：從模板文件構建首頁新聞手動的指定每一個模板文件，在一些場景下難免難以滿足需求，我們可以使用通配符正則匹配載入。從字符串載入模板我們可以定義模板字符串，然后載入并解析渲染： template.New(tplName string).Parse(tpl string) // 從字符串模板構建 tplStr := ` {{ .Name }} {{ .Age }} ` // if ...

SegmentFault 2019-08-02 15:09 評論0 收藏0
Mustache.js源碼分析

摘要：是一個弱邏輯的模板引擎，語法十分簡單，使用很方便。源碼只有行，且代碼結構清晰。解析器解析器是整個源碼中最重要的方法，用于解析模板，將標簽與模板標簽分離。同時比較后還需將的最后一個刪除，才能進行下一輪比較。 mustache.js是一個弱邏輯的模板引擎，語法十分簡單，使用很方便。源碼（v2.2.1）只有600+行，且代碼結構清晰。一般來說，mustache.js使用方法如下： var ...

mating 2019-08-26 13:29 評論0 收藏0
web.py源碼分析: 模板(3)

摘要：前兩篇文章主要說明了的模板系統將模板文件處理后得到的結果函數。生成函數的代碼這個是模板生成過程中最長最復雜的一段，會應用到的分析功能以及動態編譯功能。參數都是一個，表示還未解析的模板內容。前兩篇文章主要說明了web.py的模板系統將模板文件處理后得到的結果：__template__()函數。本文主要講述模板文件是如何變成__template__()函數的。 Render和frende...

OnlyMyRailgun 2019-07-24 17:56 評論0 收藏0
（黑馬）C++提高編程筆記（未完）

摘要：文章目錄模板模板的概念函數模板函數模板語法函數模板注意事項函數模板案例普通函數與函數模板的區別普通函數與函數模板的調用規則模板的局限性類模板類模板語法類模板與函數模板區別類模板中成員函數創建時機類模板對象做函數參數類模 ...

Jenny_Tong 2021-10-13 09:40 評論0 收藏0
如何實現一個基于 DOM 的模板引擎

摘要：我們提取變量的目的就是為了在函數中生成相應的變量賦值的字符串便于在函數中使用，例如這樣的話，只需要在調用這個匿名函數的時候傳入對應的即可獲得我們想要的結果了。 showImg(https://segmentfault.com/img/bVSspq?w=4000&h=2670); 題圖：Vincent Guth 注：本文所有代碼均可在本人的個人項目colon中找到，本文也同步到了知乎專欄...

maxmin 2019-08-20 18:36 評論0 收藏0