es6基礎0x009：模板字符串

zhaochunqi 發布于2019-08-23 13:07 / 3172人閱讀

摘要：概述模板字符串出來以后，單引號雙引號哪個好的爭論可以退出歷史舞臺的，模板字符串的最好語法單行文本多行文本內嵌表達式標簽語法不太喜歡單行文本完全不單引號和雙引號，當然，轉義是不可避免的，有所得必有所失去嘛多行文本，也不用關系換行的編碼轉化問題

0x000 概述

模板字符串出來以后，單引號、雙引號哪個好的爭論可以退出歷史舞臺的，模板字符串的`最好！

0x001 語法

單行文本

`string text`

多行文本

`string text line 1
 string text line 2`

內嵌表達式

`string text ${expression} string text`

標簽語法（不太喜歡）

tag `string text ${expression} string text`

0x002 單行文本

完全不 care 單引號和雙引號，當然，轉義`是不可避免的，有所得必有所失去嘛

let single=`string text, "" ""`` // "string text, "" ""`"

0x003 多行文本，也不用關系換行的編碼轉化問題了，也可以走開了

let multip=`string text line 1
 string text line 2`
 // "string text line 1
 //  string text line 2"

所以我們可以這么寫代碼
```
let dom=`
    我要換行
    我還要換行
`
```
雖然好像沒什么卵用

0x004 表達式

這是模板字符串最大的作用了，有好極大好處呢

更強的閱讀性和更不容易錯的字符串拼接

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"

可以內嵌表達式，表達式也可以很復雜，但是不推薦

let num1 = 1, num2 = 2
`${num1} + ${num2} = ${num1 + num2}` // "1 + 2 = 3"

模板字符串嵌套

let inner=`${`${"1"}`}` // 1

0x005 標簽語法

我不太喜歡這個特性

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 原始字符串

標簽函數的第一個參數strings.raw儲存著原始字符串，未經轉義

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()也是一樣的效果，是兩個字符。

var str = String.raw`Hi
${2+3}!`;
// "Hi
5!"

str.length;
// 6

str.split("").join(",");
// "H,i,,n,5,!"

0x007 babel轉義

源碼

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;

GPU云服務器云服務器 es6字符串擴展 ES6 es6-系列 ES6入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99222.html

es6基礎0x021：反射

摘要：概述反射說起來和上一章節的代理基本一樣，只是使用的方式不同，設計理念也不同。 0x000 概述反射說起來和上一章節的代理基本一樣，只是使用的方式不同，設計理念也不同。反射提供了一系列的靜態函數，可以使用Reflect.function_name(...prams)調用，這一系列的方法和代理的處理器對象方法一致 0x001 apply 語法 Reflect.apply(targ...

booster 2019-08-26 13:21 評論0 收藏0
es6基礎0x011：Set

摘要：概述是一個新的數據結構，和其他語言的特性差不多，當然，作為中的，他還是有一些屬于的特點。 0x000 概述 Set是一個新的數據結構，和其他語言的特性差不多，當然，作為js中的Set，他還是有一些屬于js的特點。 0x001 初始化 new Set([iterable]); 初始化一個Set有一個可選的參數，這個參數必須是一個可迭代的對象，可迭代對象包括String、Array、Arr...

jsyzchen 2019-08-23 13:09 評論0 收藏0
es6基礎0x012：Map

摘要：概述也是一個新的數據結構，在中其實也經常用到，比如下面的栗子，我們經常這么使用一個對象，與其說他是對象，其實他更像一個，但是比起真正的，這個還是有點弱了，初始化初始化一個有一個可選的參數，該參數必須是一個可迭代對象，可迭代對象包括和用戶定 0x000 概述 Map也是一個新的數據結構，在js中其實也經常用到，比如下面的栗子，我們經常這么使用一個對象，與其說他是對象，其實他更像一個Map...

DesGemini 2019-08-23 13:09 評論0 收藏0
es6基礎0x024：babel簡單使用

摘要：簡單的說就是，新語法編譯器舊語法。說明所以，對于新特性，我們可以通過使用，也可以通過語法轉化來達到兼容。 0x001 polyfill 我們都知道，js總是一直存在著兼容性問題，雖然其他語言也存在著兼容性問題，比如c++、java，但那種兼容性是新特性在舊版本上的不兼容，js則存在著各種奇形怪哉的不兼容。這其中有著非常復雜的歷史和時代的原因，并不加以累述。而解決兼容性問題的方法在以前只...

wangbinke 2019-08-23 13:41 評論0 收藏0
es6基礎0x020：代理

摘要：概述代理嘛，就是請代理人代替自己做某件事，但是和自己不一樣的是代理人可以有自己的行為，甚至可以做出和預期相違背的行為。 0x000 概述代理嘛，就是請代理人代替自己做某件事，但是和自己不一樣的是代理人可以有自己的行為，甚至可以做出和預期相違背的行為。 0x001 栗子聲明一個普通對象origin，他有一個屬性name let origin={ name: origin } ...

hatlonely 2019-08-26 12:24 評論0 收藏0