溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了ES6字符串模板，剩余參數，默認參數功能與用法。分享給大家供大家參考，具體如下：
這里介紹一下字符串模板以及剩余參數，默認參數的概念以及使用。
先來說說字符串模板。
字符串模板
ES6中允許使用反引號 ` 來創建字符串，此種方法創建的字符串里面可以包含由美元符號加花括號包裹的變量${varible}。如果你使用過像C#等后端強類型語言的話，對此功能應該不會陌生。
//產生一個隨機數
var num=Math.random();
//將這個數字輸出到console
console.log(`your num is ${num}`);
可以看出來，字符串模板其實就是將JavaScript中常用的字符串拼接變得更加簡單了一些。但是其實它還有一些不易讓人察覺的作用：
1. 模板中可以繼續套入一個模板；
2. 如果一個變量不是字符串，通過字符串模板它會變成字符串，就好像調用了.toString()方法一樣；
但是同樣的，有一些事情它也做不了：
1. 它不能自動轉義，所以為了防止CORS攻擊，我們還是要小心處理一些敏感數據；
2. 它不是用來取代其他js模板的，因為它沒有關于循環的相關語法，而這些是其他js模板擅長的。
下圖是字符串模板的使用示例：
可以看到字符串模板中還可以解析函數，并且可以帶參數。
剩余參數
接下來說說剩余參數，很多語言早就實現了剩余參數了。剩余參數說來了就是用來取代arguments的。
大家應該知道arguments吧，作為javascript函數中的默認屬性，arguments代表了所有的參數。
arguments功能雖然強大，但是容易讓人疏忽從而造成不必要的錯誤。我們舉一個例子，我們先一個簡單的驗證函數containsAll ，其作用是檢測第一個參數中是否包含后面幾個參數。
比如：
containsAll("banana", "b", "nan") //會返回 true,
containsAll("banana", "c", "nan") //會返回 false。
實現代碼如下：
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對象，但是它的下標我們是從1開始的，如果從0開始就會選中haystack了，所以不能選擇0，而這里就最容易出錯。
那么我們看看用ES6的剩余參數如何來實現這個方法：
function containsAll(haystack, ...needles) {
for (var needle of needles) {
if (haystack.indexOf(needle) === -1) {
return false;
}
}
return true;
}
可以看到剩余參數…的特定語法。也就是說，所有第2到第n個參數現在可以直接放到…后面的數組中去了。
…的用法可不僅僅局限于函數的參數噢，還可以用來簡化：
var a = [2,3,4]; var b = [ 1, ...a, 5 ]; console.log( b );// [1,2,3,4,5]
默認參數
再來談談默認參數，默認參數也早就被很多語言所實現，其實是一個很基本的功能：
function animalSentence(animals2="tigers", animals3="bears") {
return `Lions and ${animals2} and ${animals3}! Oh my!`;
}
不同的參數會返回不同的結果：
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的默認參數功能可不只這么簡單，它還可以進行簡短的表達式：
function animalSentenceFancy(animals2="tigers",animals3=(animals2 == "bears") ? "sealions" : "bears")
{
return `Lions and ${animals2} and ${animals3}! Oh my!`;
}
希望本文所述對大家ECMAScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
