ES6特性之 模板字串

2021-09-20 05:00:30 字數 1661 閱讀 3480

模板字串為構造多行字串和字串拼接帶來了更加方便的方式。

多行字串

之前，我們如果要構造乙個多行，我們需要在字串中自己加入換行符\n，就像這樣:

var lines = "text line one\ntext line two"；


//"text line one


//text line two"
上面的看起來有點亂，讓我們寫的再好看直觀一點：

var lines2 = "text line one\n" 


+ "text line two";
可以再怎麼寫，總是覺得不是很優雅美觀，尤其是文字內容比較多的時候。模板字串的出現，極大的改善了這一痛點：

var lines = `


text line one


text line two


`
是不是乾淨整潔多了？

字串拼接

模板字串只所以叫「模板」，當然是因為它支援內嵌表示式，借助這一特性，我們可以很容易的實現字串拼接：

var name = "kevin";


var age = 18;


//老的做法：


var message = "name: " + name + ", age: " + age;


// name: kevin, age: 18


//模板字串的做法：


var message2 = `name: $, age: $`;
也可以做一些簡單的計算：

var num1 = 10;


var num2 = 20;


var result = `$ + $ = $`;


// 10 + 20 = 30
標籤化模板

標籤化模板(tagged template literals)是乙個高階特性，同乙個模板字串可以通過使用不同的標籤，對模板進行進一步處理，輸出不同的結果。

var name = "kevin";


morning`hello,$`;  // good morning, kevin


evening`hello,$`;  // good evening, kevin
等一下！上面的程式是怎麼回事？morning,evening做了什麼？

其實，這裡的morning,evening就是所謂的標籤(tag)了，它們其實就是乙個函式：

function morning(strings, ...values) 


function evening(strings, ...values)
var name = "kevin";


var age = 18;


//比如我們有如下模板字串


var template = `name: $, age: $`;


//則在標籤函式中的第乙個引數strings就為：


//strings為 ["name: ", ", age: ", ""]
// values為 ["kevin", 18]

ES6模板字串

es6提供了模板字串使字串的拼接以及模板的編寫變得特別簡單,組合字串的時候不在需要加號單引號這些，直接使用一對反引號即可，而且字串中需要變數的時候直接 的這種方式，大括號裡面可以是任何的js表示式，變數，物件的屬性，還可以是乙個函式，模板字串還可以進行巢狀。const person lili con...

es6 模板字串

模板字串 反引號表示 是增強版的字串,可以用作普通字串,也可以使用多行字串,也可以巢狀使用 1 this is a string 2 this is a string 3 let n a this is string 在模板字串中輸出多行字串的時候,會按照書寫的格式進行輸出,字元之間的空格和縮排都會...

es6模板字串

es6新增的建立字串的方式，使用反引號定義 let str 模板字串 console.log str 特點 可以解析變數。將變數放於 中 let val 123 let str2 模板字串 console.log str2 現在在模板字串的字串換行書寫，同時顯示也會進而換行顯示 let obj le...