ES6中模板字串

2021-09-24 10:08:43 字數 2168 閱讀 4585

模板字串,是es6標準新引入的一種字串.說到底,它還是字串,只是和以前的字串比起來,有了一些特殊的地方.

模板字串(template string),是es6標準之前的es版本的字串的增強版,但它的本質上還是字串,用反引(電腦鍵盤中esc下面的那個鍵)號標識.它可以當作普通的字串來使用,也可以定義多行字串,而且在定義多行字串的時候還會保持字串的格式;也可以在字串中嵌入變數以及任何合法的js表示式.

1.作普通的字串來使用

let tmpstr = `hello world!`;
這種普通的字串,和我們之前使用雙引號或者單引號定義的字串除了引號的區別外,沒有別的任何區別.

2.多行字串

模板字串在表示多行字串的時候,它會把字串的格式也會儲存下來.即我們在定義這個模板字串變數的時候,它表示的多行自負串是什麼格式的,那麼它輸出這個變數值的時候,也會把這個字串原樣輸出出來,包括縮排等格式.如我們定義乙個多行的模板字串:

let multistr = `


`;
我們把這個模板字串列印出來:

它不光把字串的內容列印了出來,而且把字串的縮排等格式也列印了出來.

這個時候我們可以通過使用trim()方法將格式清除.

雖然我們使用了trim()去掉了模板字串的格式,但是通過列印我們並沒有明顯的效果看出來,僅有的一點效果就是第一行的效果緊靠在了當前行的起始位置.這個好像不能明確的說明去除了格式樣式,以後把這一塊理解透了,再回來補這一塊的內容.

let multistr = `


`;console.log(multistr.trim());
3.模板字串中嵌入變數

以前我們在字串中嵌入變數的時候,會使用字串拼接變數的方式來實現.比如我們的頁面中有乙個空的ul元素,然後根據一定的條件想動態的向這個ul元素中新增一些li元素.具體如下:

有乙個空的ul元素,然後根據一定的條件向ul中動態的新增li元素:

for(var i = 1; i < 5; i++)
最終實現的效果如下:

這裡的1,2,3,4是變數,這裡實現效果和功能沒有任何問題,但對我們的要求是有點高的,我們一不小心就可能會把引號的對應關係給混淆出錯了.

我們可以嘗試使用模板字串中嵌入變數的方式來實現一下.

模板字串中嵌入變數,需要將變數名寫在${}中.

for(var i = 6; i < 10; i++)個元素`;


}
新的實現方式,看起來乾淨整潔,也不用擔心引號的配對閉合問題出錯,**也顯得有逼格.

4.模板字串中可以嵌入任意合法的js表示式,可以進行算術運算以及對物件屬性的引用

//對變數的算術運算


var x = 2;


var y = 3;


console.log(`$ + $ = $`); //2 + 3 = 5


console.log(`$ + $ = $`); //2 + 6 = 8


//對物件屬性的引用


var user = ;


console.log(`$`); //nicholas
除了嵌入的這些常規的變數的算術勻速以及物件屬性的引用之外,也可以對函式進行呼叫.簡單的理解一下,函式的呼叫是通過函式名來呼叫的,我們就可以簡單的理解為函式名就是乙個變數,那麼我們在模板字串中對函式的呼叫其實就是對普通變數的引用.

function output()


console.log(`$`); //hello world!
模板字串,不管我們表面上看起來模板字串處理的或者是普通字元,或者是多行字串,又或者是js表示式以及對物件屬性的呼叫和函式的呼叫,但本質上都是對字串的操作,如果{}中的內容不是乙個字串,那麼就按照js中的資料型別轉換規則將非字串型別的內容轉換為字串.比如{}中的內容是乙個物件,那麼就呼叫物件的tostring()方法將物件轉換成字串.

模板字串中的變數,是需要先宣告過的變數.如果使用了沒有宣告過的變數,將會報錯.

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...