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

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

字符串模板

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

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

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

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

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

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

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

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

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

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

剩余參數(shù)

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

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

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

比如：

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

實現(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對象，但是它的下標(biāo)我們是從1開始的，如果從0開始就會選中haystack了，所以不能選擇0，而這里就最容易出錯。

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

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

可以看到剩余參數(shù)…的特定語法。也就是說，所有第2到第n個參數(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ù)也早就被很多語言所實現(xiàn)，其實是一個很基本的功能：

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

不同的參數(shù)會返回不同的結(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ù)功能可不只這么簡單，它還可以進行簡短的表達式：

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

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

最新評論