iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 19
1
Modern Web

JS讀書筆記系列 第 19

JS讀書筆記30天 - Day19 樣板字面值

什麼叫樣板字面值

樣板字面值(Template Literals),在之前的JavaScript先行版本中又稱為Template String,主要是解決字串在串接時,因為多行或過長,而導致的程式碼閱讀困難問題,利用樣板字面值,可以讓字串串接時變得簡潔易讀。

樣板字面值寫法

傳統的串接方式,是用半形單引號('')或是半形雙引號(""),搭配半形加號(+),將字詞串接起來。

var surname = "Lin";
var name = "Jessie";
console.log("My name is "+name+" "+surname+".");

而字面樣板值的寫法,是將所有的字串全部用半形反引號包覆起來,再將要替換的字詞放在半形大括弧({})中,大括弧前面接半形錢字號($)。

半形反引號的位置,在鍵盤的左上角,esc鍵的正下方,數字1鍵的左方。

寫法是:

var 變數A;
var 變數B;

str = `原本的字串${變數A}原本的字串${變數B}原本的字串`;

所以如果以樣板字面值改寫上方傳統字串串接的程式碼,就會變成:

var surname = "Lin";
var name = "Jessie";
console.log(`My name is ${name} ${surname}.`);

字串間如果需要空白,只要在半形錢字號($)前留下空白就可以了。

樣板字面值的預設值

樣板字面值和傳統字串串接的方式最大的不同,是可以設定預設值,在字串串接的變數不用時,可以用表達式的方式,設定預設值。

var surname = "";
var name = "";
console.log(`My name is ${name||'John'} ${surname||'Doe'}.`);

所以在上面的程式碼中,如果沒有設定變數name,就會出現John的預設值,變數surname也是同樣情況,如果沒有設定,就會出現Doe的預設值。

多行字串的串接

在傳統的串接方式,多行字串在換行時,需要加半形反斜線(\),半形反斜線(\)位置在鍵盤右側,enter鍵的正上方。

這樣的字串串接,會使得閱讀上非常麻煩。

str = "<ul>\
<li>我是1</li>\
<li>我是2</li>\
<li>我是3</li>\
</ul>"
console.log(str);

這樣的程式碼,如果用樣板字面值來寫,就會容易得多:

str = `<ul>
<li>我是1</li>
<li>我是2</li>
<li>我是3</li>
</ul>`
console.log(str);

用樣板字面值來寫這段程式碼,不需要加半形反斜線(\),而且程式碼乾淨利落,容易閱讀。


上一篇
JS讀書筆記30天 - Day18 let和const
下一篇
JS讀書筆記30天 - Day20 繼承與原型鍊
系列文
JS讀書筆記30

尚未有邦友留言

立即登入留言