本文實(shí)例講述了ES6字符串模板，剩余參數(shù)，默認(rèn)參數(shù)功能與用法。分享給大家供大家參考，具體如下：

這里介紹一下字符串模板以及剩余參數(shù)，默認(rèn)參數(shù)的概念以及使用。
先來說說字符串模板。

字符串模板

ES6中允許使用反引號(hào) ` 來創(chuàng)建字符串，此種方法創(chuàng)建的字符串里面可以包含由美元符號(hào)加花括號(hào)包裹的變量${varible}。如果你使用過像C#等后端強(qiáng)類型語言的話，對(duì)此功能應(yīng)該不會(huì)陌生。

//產(chǎn)生一個(gè)隨機(jī)數(shù)
var num=Math.random();
//將這個(gè)數(shù)字輸出到console
console.log(`your num is ${num}`);

可以看出來，字符串模板其實(shí)就是將JavaScript中常用的字符串拼接變得更加簡單了一些。但是其實(shí)它還有一些不易讓人察覺的作用：

1. 模板中可以繼續(xù)套入一個(gè)模板；

2. 如果一個(gè)變量不是字符串，通過字符串模板它會(huì)變成字符串，就好像調(diào)用了.toString()方法一樣；

但是同樣的，有一些事情它也做不了：

1. 它不能自動(dòng)轉(zhuǎn)義，所以為了防止CORS攻擊，我們還是要小心處理一些敏感數(shù)據(jù)；

2. 它不是用來取代其他js模板的，因?yàn)樗鼪]有關(guān)于循環(huán)的相關(guān)語法，而這些是其他js模板擅長的。

下圖是字符串模板的使用示例：

可以看到字符串模板中還可以解析函數(shù)，并且可以帶參數(shù)。

剩余參數(shù)

接下來說說剩余參數(shù)，很多語言早就實(shí)現(xiàn)了剩余參數(shù)了。剩余參數(shù)說來了就是用來取代arguments的。

大家應(yīng)該知道arguments吧，作為javascript函數(shù)中的默認(rèn)屬性，arguments代表了所有的參數(shù)。

arguments功能雖然強(qiáng)大，但是容易讓人疏忽從而造成不必要的錯(cuò)誤。我們舉一個(gè)例子，我們先一個(gè)簡單的驗(yàn)證函數(shù)containsAll ，其作用是檢測第一個(gè)參數(shù)中是否包含后面幾個(gè)參數(shù)。

比如：

containsAll("banana", "b", "nan") //會(huì)返回 true,
containsAll("banana", "c", "nan") //會(huì)返回 false。

實(shí)現(xiàn)代碼如下：

function containsAll(haystack) {
 for (var i = 1; i < arguments.length; i++) {
  var needle = arguments[i];
  if (haystack.indexOf(needle) === -1) {
   return false;
  }
 }
 return true;
}

可以看到我們用到了arguments對(duì)象，但是它的下標(biāo)我們是從1開始的，如果從0開始就會(huì)選中haystack了，所以不能選擇0，而這里就最容易出錯(cuò)。

那么我們看看用ES6的剩余參數(shù)如何來實(shí)現(xiàn)這個(gè)方法：

function containsAll(haystack, ...needles) {
 for (var needle of needles) {
  if (haystack.indexOf(needle) === -1) {
   return false;
  }
 }
 return true;
}

可以看到剩余參數(shù)…的特定語法。也就是說，所有第2到第n個(gè)參數(shù)現(xiàn)在可以直接放到…后面的數(shù)組中去了。

…的用法可不僅僅局限于函數(shù)的參數(shù)噢，還可以用來簡化：

var a = [2,3,4];
var b = [ 1, ...a, 5 ];
console.log( b );// [1,2,3,4,5]

默認(rèn)參數(shù)

再來談?wù)勀J(rèn)參數(shù)，默認(rèn)參數(shù)也早就被很多語言所實(shí)現(xiàn)，其實(shí)是一個(gè)很基本的功能：

function animalSentence(animals2="tigers", animals3="bears") {
  return `Lions and ${animals2} and ${animals3}! Oh my!`;
}

不同的參數(shù)會(huì)返回不同的結(jié)果：

animalSentence()//"Lions and tigers and bears! Oh my!"；
animalSentence("elephants") //"Lions and elephants and bears! Oh my!"
animalSentence("elephants", "whales")//"Lions and elephants and whales! Oh my!".

但是javascript的默認(rèn)參數(shù)功能可不只這么簡單，它還可以進(jìn)行簡短的表達(dá)式：

function animalSentenceFancy(animals2="tigers",animals3=(animals2 == "bears") ? "sealions" : "bears")
{
 return `Lions and ${animals2} and ${animals3}! Oh my!`;
}

希望本文所述對(duì)大家ECMAScript程序設(shè)計(jì)有所幫助。

最新評(píng)論