資訊專欄INFORMATION COLUMN
摘要：概述模板字符串出來以后，單引號(hào)雙引號(hào)哪個(gè)好的爭論可以退出歷史舞臺(tái)的，模板字符串的最好語法單行文本多行文本內(nèi)嵌表達(dá)式標(biāo)簽語法不太喜歡單行文本完全不單引號(hào)和雙引號(hào)，當(dāng)然，轉(zhuǎn)義是不可避免的，有所得必有所失去嘛多行文本，也不用關(guān)系換行的編碼轉(zhuǎn)化問題
0x000 概述
模板字符串出來以后，單引號(hào)、雙引號(hào)哪個(gè)好的爭論可以退出歷史舞臺(tái)的，模板字符串的`最好！
0x001 語法
單行文本
`string text`
多行文本
`string text line 1 string text line 2`
內(nèi)嵌表達(dá)式
`string text ${expression} string text`
標(biāo)簽語法（不太喜歡）
tag `string text ${expression} string text`
0x002 單行文本
完全不 care 單引號(hào)和雙引號(hào)，當(dāng)然，轉(zhuǎn)義`是不可避免的，有所得必有所失去嘛
let single=`string text, "" ""`` // "string text, "" ""`"0x003 多行文本，也不用關(guān)系換行的編碼轉(zhuǎn)化問題了， 也可以走開了
let multip=`string text line 1 string text line 2` // "string text line 1 // string text line 2"
所以我們可以這么寫代碼
```
let dom=`
我要換行
我還要換行
`
```
雖然好像沒什么卵用
0x004 表達(dá)式
這是模板字符串最大的作用了，有好極大好處呢
更強(qiáng)的閱讀性和更不容易錯(cuò)的字符串拼接
let name="jack",age=23
let summary=`my name is ${name}, age is ${age}`
console.log(summary) // "my name is jack, age is 23"
對比一下之前的字符串拼接
let name="jack",age=23 let summary="my name is " + name + ", age is " + age console.log(summary) // "my name is jack, age is 23"
可以內(nèi)嵌表達(dá)式，表達(dá)式也可以很復(fù)雜，但是不推薦
let num1 = 1, num2 = 2
`${num1} + ${num2} = ${num1 + num2}` // "1 + 2 = 3"
模板字符串嵌套
let inner=`${`${"1"}`}` // 1
0x005 標(biāo)簽語法
我不太喜歡這個(gè)特性
function myTag(strings, personExp, ageExp) {
var str0 = strings[0]; // "that "
var str1 = strings[1]; // " is a "
var str2 = strings[2]; // " "
var ageStr;
if (ageExp > 99){
ageStr = "centenarian";
} else {
ageStr = "youngster";
}
return str0 + personExp + str1 + ageStr;
}
var output = myTag`that ${ "Mike" } is a ${ "22" }`;
console.log(output);// that Mike is a youngster
0x006 原始字符串
標(biāo)簽函數(shù)的第一個(gè)參數(shù)strings.raw儲(chǔ)存著原始字符串，未經(jīng)轉(zhuǎn)義
function tag(strings) {
console.log(strings.raw[0]);
}
tag`string text line 1
string text line 2`; // "string text line 1
string text line 2"
使用String.raw()也是一樣的效果， 是兩個(gè)字符。
var str = String.raw`Hi
${2+3}!`;
// "Hi
5!"
str.length;
// 6
str.split("").join(",");
// "H,i,,n,5,!"
0x007 babel轉(zhuǎn)義
源碼
let name="jack",age=23
let summary=`my name is ${name}, age is ${age}`
翻譯后
var name = "jack",
age = 23;
var summary = "my name is " + name + ", age is " + age;
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99222.html
摘要：概述反射說起來和上一章節(jié)的代理基本一樣，只是使用的方式不同，設(shè)計(jì)理念也不同。 0x000 概述 反射說起來和上一章節(jié)的代理基本一樣，只是使用的方式不同，設(shè)計(jì)理念也不同。 反射提供了一系列的靜態(tài)函數(shù)，可以使用Reflect.function_name(...prams)調(diào)用，這一系列的方法和代理的處理器對象方法一致 0x001 apply 語法 Reflect.apply(targ...
摘要：概述是一個(gè)新的數(shù)據(jù)結(jié)構(gòu)，和其他語言的特性差不多，當(dāng)然，作為中的，他還是有一些屬于的特點(diǎn)。 0x000 概述 Set是一個(gè)新的數(shù)據(jù)結(jié)構(gòu)，和其他語言的特性差不多，當(dāng)然，作為js中的Set，他還是有一些屬于js的特點(diǎn)。 0x001 初始化 new Set([iterable]); 初始化一個(gè)Set有一個(gè)可選的參數(shù)，這個(gè)參數(shù)必須是一個(gè)可迭代的對象，可迭代對象包括String、Array、Arr...
摘要：概述也是一個(gè)新的數(shù)據(jù)結(jié)構(gòu)，在中其實(shí)也經(jīng)常用到，比如下面的栗子，我們經(jīng)常這么使用一個(gè)對象，與其說他是對象，其實(shí)他更像一個(gè)，但是比起真正的，這個(gè)還是有點(diǎn)弱了，初始化初始化一個(gè)有一個(gè)可選的參數(shù)，該參數(shù)必須是一個(gè)可迭代對象，可迭代對象包括和用戶定 0x000 概述 Map也是一個(gè)新的數(shù)據(jù)結(jié)構(gòu)，在js中其實(shí)也經(jīng)常用到，比如下面的栗子，我們經(jīng)常這么使用一個(gè)對象，與其說他是對象，其實(shí)他更像一個(gè)Map...
摘要：簡單的說就是，新語法編譯器舊語法。說明所以，對于新特性，我們可以通過使用，也可以通過語法轉(zhuǎn)化來達(dá)到兼容。 0x001 polyfill 我們都知道，js總是一直存在著兼容性問題，雖然其他語言也存在著兼容性問題，比如c++、java，但那種兼容性是新特性在舊版本上的不兼容，js則存在著各種奇形怪哉的不兼容。這其中有著非常復(fù)雜的歷史和時(shí)代的原因，并不加以累述。而解決兼容性問題的方法在以前只...
摘要：概述代理嘛，就是請代理人代替自己做某件事，但是和自己不一樣的是代理人可以有自己的行為，甚至可以做出和預(yù)期相違背的行為。 0x000 概述 代理嘛，就是請代理人代替自己做某件事，但是和自己不一樣的是代理人可以有自己的行為，甚至可以做出和預(yù)期相違背的行為。 0x001 栗子 聲明一個(gè)普通對象origin，他有一個(gè)屬性name let origin={ name: origin } ...
閱讀 2665·2021-11-22 15:24
閱讀 1402·2021-11-17 09:38
閱讀 2790·2021-10-09 09:57
閱讀 1234·2019-08-30 15:44
閱讀 2474·2019-08-30 14:00
閱讀 3565·2019-08-30 11:26
閱讀 2957·2019-08-29 16:28
閱讀 773·2019-08-29 13:56
