初学者跪着学JavaScript Day6 :template literals和 tagged template literals傻傻分不清楚

一日客家话：黑黑的 念法：五无

之前只学过 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 字串样版