成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

模板字符串(Template String)

changfeng1050 / 983人閱讀

摘要：如果使用模板字符串表示多行字符串，則所有的空格縮進(jìn)和換行都會(huì)被保留在輸出中。模板字符串中嵌入變量，要將變量名寫(xiě)在之中。變量沒(méi)有聲明模板字符串之間還可以進(jìn)行嵌套。上面代碼中，模板字符串前面有一個(gè)標(biāo)識(shí)名，它是一個(gè)函數(shù)。

語(yǔ)法

模板字符串(Template String)是增強(qiáng)版的字符串，用反引號(hào)(`)標(biāo)識(shí)，它可以當(dāng)作普通字符串使用，也可以用來(lái)定義多行字符串，或者在字符串中嵌入變量。

用法

// 普通字符串
`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?

上面代碼中，模板字符串都是用反引號(hào)表示，如果在模板字符串中需要使用反引號(hào)，則前面需要用反斜杠轉(zhuǎn)義。

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

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

$("#list").html(`

    
  
  • first
    • 
  
  • second
    • 


`);

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

    標(biāo)簽前面會(huì)有一個(gè)換行。如果想把行首和行尾的換行、空格等去掉，則使用trim方法即可。

    $("#list").html(`

      
  
    • first
      • 
  
    • second
      • 

    
`.trim());

    模板字符串中嵌入變量，要將變量名寫(xiě)在${}之中。大括號(hào)內(nèi)可以放入任意的JavaScript表達(dá)式，可以進(jìn)行運(yùn)算，以及引入對(duì)象屬性。

    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"

    模板字符串之中還可以調(diào)用函數(shù)。

    function func() {
    return "Hello";
}

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

    如果大括號(hào)中的值不是字符串，則將按照一般的規(guī)則轉(zhuǎn)換為字符串。如，若大括號(hào)中是一個(gè)對(duì)象，則將默認(rèn)調(diào)用對(duì)象的toString方法，把對(duì)象轉(zhuǎn)換為字符串。

    如果模板字符串中的變量沒(méi)有聲明，則會(huì)報(bào)錯(cuò)。

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

    模板字符串之間還可以進(jìn)行嵌套。

    var tmpl = addrs => `
    
    ${addrs.map(addr => `
        
    `).join("")}
    
    ${addr.first}
    
        
    ${addr.last}
    
`;

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

// output:
/*"
    
    

        
    a
    
        
    b
    

    
    
"*/

    如果需要引用模板字符串本身，在需要時(shí)執(zhí)行，可以像下面這樣寫(xiě)。

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

// 寫(xiě)法二
var str = "(name) => `Hello ${name}!`";
var func = eval.call(null, str);
func("Amy");    // "Hello Amy!"
    標(biāo)簽?zāi)０?/h5>

    模板字符串的功能，不僅是上面那些，它還可以緊跟在一個(gè)函數(shù)后面，該函數(shù)將被調(diào)用來(lái)處理這個(gè)模板字符串，這種稱為“標(biāo)簽?zāi)０濉惫δ?Tagged template)。

    標(biāo)簽?zāi)０搴瘮?shù)第一個(gè)參數(shù)是字符串模板的常量數(shù)組，后面的每一個(gè)參數(shù)為表達(dá)式的計(jì)算結(jié)果，函數(shù)名稱可以任意指定。下面是一個(gè)例子：

    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)

    標(biāo)簽?zāi)０迤渌且环N特殊的函數(shù)調(diào)用形式，“標(biāo)簽”指的就是函數(shù)，緊跟在后面的模板字符串就是它的參數(shù)。

    var a = 1,
    b = 2;

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

    上面代碼中，模板字符串前面有一個(gè)標(biāo)識(shí)名tag，它是一個(gè)函數(shù)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/84195.html

相關(guān)文章

  • go html/template 模板的使用實(shí)例

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

    SegmentFault 評(píng)論0 收藏0

  • Mustache.js源碼分析

    摘要：是一個(gè)弱邏輯的模板引擎，語(yǔ)法十分簡(jiǎn)單，使用很方便。源碼只有行，且代碼結(jié)構(gòu)清晰。解析器解析器是整個(gè)源碼中最重要的方法，用于解析模板，將標(biāo)簽與模板標(biāo)簽分離。同時(shí)比較后還需將的最后一個(gè)刪除，才能進(jìn)行下一輪比較。 mustache.js是一個(gè)弱邏輯的模板引擎，語(yǔ)法十分簡(jiǎn)單，使用很方便。源碼（v2.2.1）只有600+行，且代碼結(jié)構(gòu)清晰。 一般來(lái)說(shuō)，mustache.js使用方法如下： var ...

    mating 評(píng)論0 收藏0

  • web.py源碼分析: 模板(3)

    摘要：前兩篇文章主要說(shuō)明了的模板系統(tǒng)將模板文件處理后得到的結(jié)果函數(shù)。生成函數(shù)的代碼這個(gè)是模板生成過(guò)程中最長(zhǎng)最復(fù)雜的一段，會(huì)應(yīng)用到的分析功能以及動(dòng)態(tài)編譯功能。參數(shù)都是一個(gè)，表示還未解析的模板內(nèi)容。 前兩篇文章主要說(shuō)明了web.py的模板系統(tǒng)將模板文件處理后得到的結(jié)果：__template__()函數(shù)。本文主要講述模板文件是如何變成__template__()函數(shù)的。 Render和frende...

    OnlyMyRailgun 評(píng)論0 收藏0

  • （黑馬）C++提高編程筆記（未完）

    摘要：文章目錄模板模板的概念函數(shù)模板函數(shù)模板語(yǔ)法函數(shù)模板注意事項(xiàng)函數(shù)模板案例普通函數(shù)與函數(shù)模板的區(qū)別普通函數(shù)與函數(shù)模板的調(diào)用規(guī)則模板的局限性類(lèi)模板類(lèi)模板語(yǔ)法類(lèi)模板與函數(shù)模板區(qū)別類(lèi)模板中成員函數(shù)創(chuàng)建時(shí)機(jī)類(lèi)模板對(duì)象做函數(shù)參數(shù)類(lèi)模 ...

    Jenny_Tong 評(píng)論0 收藏0

  • 如何實(shí)現(xiàn)一個(gè)基于 DOM 的模板引擎

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

    maxmin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<