一日客家話：黑黑的 唸法：五無

之前只學過 template literals，tagged template literals 是殺毀啦？？

template literals(樣板字面值)和 tagged template literals(標籤樣板字面值)真的傻傻分不清楚了!!

厚～名字超像到底有沒有關係？？ 使用廢材英文能力看一下

ES6 新增兩種literals

1.template literals

2.tagged template literals:是函式呼叫

名字很像但是是非常不同

模板文字(template literals)或稱模板字符串(template strings)/樣板字面值/字串字面值

介紹

方法：反引號 (``)字符

• 可以做到一般字串能做的事情

• 優於一般字串因為可以更簡單做到多行字串

• 可以插入值${···})

• 可以插入表達式${a+b}

單行文字

string:

單引號雙引號沒有差別

const single = 'good morning';

const double = "good morning";

Template literals

就不需要轉義單引號或雙引號

const template = `good morning`

多行文字時

string: 需要\n 換行符號和＋

const string = 'hi wendy\n'+'good morning';
//hi wendy
//good morning

Template literals
無需像一般字串方式

const string = 
`hi wendy
good morning`;

//hi wendy
//good morning

但要注意裡面任何縮排都會被保留

const string = `hi wendy
                              good morning`;
console.log(string);

結果
hi wendy
                              good morning

插入值

string:

const name = 'wendy';
const myString = 'hi\n' + name + '\ngood morning';
console.log(myString);

//hi
//wendy
//good morning

Template literals

const template = `hi
${name}
good morning`;
console.log(template);
//hi
//wendy
//good morning

${可以加表達式}

const template = `計算
value1+value2 
=${value1 + value2} `;
console.log(template);

//計算
//value1+value2 
//=110 

支援度如何？

9/28補充：

字面值${value}裡放array和使用雙引號會不一樣

因為字面值會轉toString

let myArray = [100,200];
console.log(`myArray.valueOf():${myArray.valueOf()}`);//100,200
console.log('myArray.valueOf():', myArray.valueOf());//[100,200]

標籤樣板字面值(Tagged template literals) /tagged templates

介紹

ECMA:

mdn: 透過標籤函數操作樣板字面值的輸出

所以Tagged templates 是一種函式呼叫

• 定義 function
• 呼叫 tag function :使用Template literals 可以不用( )
• Template literals可以使用${expression}

使用方式：在``前面放要呼叫的函式名字＋樣板字面值

function name +Template literals

討論三種情況：

第一種：樣板字面值只有string

food`apple`

第二種：樣板字面值只有${value}

food`${value}`

第三種 : 樣板字面值，我都有

food`apple${value} orange`

• function第一個參數是array是放Template Literal 的文字

第一種：樣板字面值只有string

第一個參數是array:放字面值的string

function food(str) {
    return str;
}
console.log(food`apple`);//[apple]

第二種：樣板字面值只有 ${value}

Template Literal 只有 ${value1} 沒有其他字
那第一參數的 array 內還會有元素嗎?

結果: arra y裡有兩個空字串：[ ' ', ' ' ]
因為會在頭跟尾會建立 empty String

function food(str) {
    return str;
}
const value1 = 100;
console.log(food`${value1}`);//[ '', '' ]

function food(str, value1) {
    console.log(str);//[]
    console.log(value1);//100
}
const value1 = 100;
food`${value1}`;

第三種:樣板字面值，我都有

tag function 提供兩種不同資料
Template strings ：字面值裡的string
Substitutions(不知道該如何稱呼它）是${apple}和${banana}

那第一個參數的 array 裡裝什麼?

function food(strings) {
    console.log(strings);
}
const apple = 'apple';
const banana = 'banana';

food`start ${apple}和${banana}end`;//[ 'start ', '和', 'end' ]
food`${apple} inner1和inner2 ${banana}`;//[ '', ' inner1 ', ' end' ]
food`${apple} inner1 ${banana} end`;//[ '', ' inner1inner2 ', '' ]

字面值頭尾有文字

start,end

第一個參數的 array 如何？

food`start ${apple}和${banana}end`;
//[ 'start ', '和', 'end' ]

頭和尾只有其中一邊有字
有字會裝進array裡，沒有字會用空字串裝進去

food`${apple} inner1和inner2 ${banana}`;//[ '', ' inner1 ', ' end' ]

字面值頭尾沒有文字
那就頭尾都用空字串裝進去array

food`${apple} inner1 ${banana} end`;//[ '', ' inner1inner2 ', '' ]

也可以有${表達式}

function food(strings, value1, value2, value3) {
    console.log(strings);//[ '', ' inner1 ', ' end ', '' ]
    console.log('value1', value1);//value1 apple
    console.log('value2', value2);//value2 banana
    console.log(value3);//1010
}
const apple = 'apple';
const banana = 'banana';
const value1 = 10;
const value2 = 1000;
food`${apple} inner1 ${banana} end ${value1 + value2}`;

function 參數也是可以其餘參數（rest parameter）

function food(strings, ...friut) {
    console.log(friut);//[ 'apple', 'banana', 'orange' ]
}

const apple = 'apple';
const banana = 'banana';
const orange = 'orange';
food`我要吃${apple}和${banana}還有${orange}`;

template literal 有 String.raw 的方法

console.log(String.raw`hi\歡迎光臨.`);//hi\歡迎光臨.

回傳是模板字符串的原始字符串

要注意換行符只會作為文字

突然覺得超忙要學習又要學客家話又要畫圖

希望自己可以撐住 囧

資料參考：
8. Template literals
Tagged Template Literals
Ecma262
ES6 Template Literals
//Fooish 程式技術//-JavaScript ES6 Template Literals 字串樣版