ES6基礎中字符串和函數的示例分析

小編給大家分享一下ES6基礎中字符串和函數的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

字符串的拓展

1.ES6為字符串添加了遍歷器接口，因此可以使用for...of循環遍歷字符串

2.字符串新增的 includes()、startsWith()、endsWidth() 三個方法用于判斷某一字符串是否包含于另一字符串

• includes()：返回布爾值，表示源字符串中是否包含參數字符串。

• startsWith()：返回布爾值，表示參數字符串是否在源字符串的頭部。

• endsWith()：返回布爾值，表示參數字符串是否在源字符串的尾部。

3.新增 repeat() 方法， 該方法返回一個新字符串，不是對原字符串操作，表示將原字符串重復n次。

let str = 'abc';
str.repeat(3) //abcabcabc 
str //abc

ps:該方法參數為正整數，如果為負數會報錯，小數向下取整；

4.新增 padStart()，padEnd() 方法，用于補全字符串，該方法返回一個新字符串，不是對原字符串操作，傳入兩個參數，第一個參數用來指定字符串的最小長度，第二個參數是用來補全的字符串（缺省的話默認空格補全）。（ps：如果原字符串的長度，等于或大于指定的最小長度，則返回原字符串）；

let str = 'abc';
str.padStart(2, 'abc') // 'abc'
str.padEnd(2, 'abc') // 'abc'

5.模板字符串··（esc下面的那個按鍵），可以擺脫傳統的字符串拼接的模式，直接將變量（表達式，對象的引用，函數等）寫在模板字符串中輸出

let str = 'world';
let html = `hello ${str}`;
html //hello wrold

ps：所有模板字符串的空格和換行，都是被保留的，可以使用trim方法消除換行。

6.標簽模板，即模板字符串緊跟在一個函數名后面，該函數將被調用來處理這個模板字符串，這中方式被稱為“標簽模板”，“標簽”指的就是函數，緊跟在后面的模板字符串就是它的參數

console.log `123`
// 等同于
console.log (123)

7.如果模板字符里面有變量，會將模板字符串先處理成多個參數，再調用函數;

var a = 5;
var b = 10;
function tag(s, v1, v2) {
 console.log(s)
 console.log(v1);
 console.log(v2);
}
tag`Hello ${ a + b } world ${ a * b }`;
//['Hello','world','']
//15
//50

可以看出，tag函數第一個參數是一個數組，數組的成員是模板字符串中那些沒有變量替換的部分，其他參數，都是模板字符串各個變量被替換后的值；

8.再來一個例子，看看標簽模板的使用方法：

var total = 30;
var msg = passthru`The total is ${total} (${total*1.05} with tax)`;
function passthru(literals) {
 var result = '';
 var i = 0;
 while (i < literals.length) {
  result += literals[i++];
  if (i < arguments.length) {
   result += arguments[i];
  }
 }
 return result;
}

上述例子中，參數 literals 實際上是 <code> ["The total is "," ("," with tax)"] </code> , 函數內部 arguments 的值是 <code>{ "0" : ["The total is "," ("," with tax)"] , "1" : 30 , "2" : 31.5 }</code>，通過以上梳理，可以將各個參數按照原來的位置拼合回去，最終得到輸出為<code>"The total is 30 (31.5 with tax)"</code>

ps：在使用標簽模板的時候，要注意參數的位置，可根據自己實際的需求進行修改，返回正確的結果；

函數的拓展

1.ES6 允許為函數的參數設置默認值，即直接寫在參數定義的后面，一目了然，十分實用

function say( x , y = 'World') {
  console.log( x , y);
}
say('Hello') // Hello World
say('Hello','Kite') //Hello Kite

2.函數參數默認已經聲明，不能再用 let 或者 const 聲明，而且不能有同名參數

3.一旦設置了參數的默認值，函數進行聲明初始化時，參數會形成一個單獨的作用域（context）。等到初始化結束，這個作用域就會消失；

var x = 1;
function f(x, y = x) {
 console.log(y);
}
f(2) // 2

上面例子中，參數y的默認值等于變量x。調用函數f時，參數形成一個單獨的作用域。在這個作用域里面，默認值變量x指向第一個參數x，而不是全局變量x，所以輸出是2；

let x = 1;
function f( y = x ) {
 let x = 2;
 console.log(y);
}
f() // 1

上面例子中,函數f調用時，參數y=x形成一個單獨的作用域。這個作用域里面，變量x本身沒有定義，所以指向外層的全局變量x。函數調用時，函數體內部的局部變量x影響不到默認值變量x;

4.函數聲明時，可以將某個參數默認值設為undefined，表明這個參數是可以省略的；

5.rest 參數（形式為...變量名），用于獲取函數的多余參數，該變量是一個數組，用于將多余的參數放入該數組中。（rest 參數之后不能再有其他參數，它只能是函數的最后一個參數，否則會報錯）

function func(...params){
  console.log(params)
}
func(1,2,3) // [1，2，3]
function func( x , ...params){
  console.log(params)
}
func(1,2,3) // [2，3]

6.箭頭函數（=>），ES6 允許使用“箭頭”（=>）定義函數，這種寫法相比較 ES5 定義 function 看起來簡潔得多；

var func = x => x 
//等同于
var func = function func(x) {
  return x;
};

7.如果箭頭函數沒有參數或者有多個參數的話，則需要加上()來進行聲明；

var func = () => 'Hello World';
//等同于
var func = function func() {
 return 'Hello World';
};
var func = ( x , y ) => x + y
//等同于
var func = function func(x, y) {
 return x + y;
};

8.如果箭頭函數的代碼塊部分多于一條語句，就要使用大括號將它們括起來，并且使用return語句返回;

var func = ( x , y ) => { return x + y; }

9.如果箭頭函數直接返回一個對象，必須在對象外面加上括號;

var func = ( x , y ) => ({ x : x , y : y })

10.箭頭函數使用時必須注意以下幾個問題：

函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象；

function foo() {
 setTimeout(() => {
  console.log('id:', this.id);
 }, 100);
}
var id = 21;
foo.call({ id: 42 }); //42

上面代碼中，setTimeout的參數是一個箭頭函數，這個箭頭函數的定義生效是在foo函數生成時，而它的真正執行要等到100毫秒后。如果是普通函數，執行時this應該指向全局對象window，這時應該輸出21。但是，箭頭函數導致this總是指向函數定義生效時所在的對象（本例是{id: 42}），所以輸出的是42。

• 箭頭函數不可以當作構造函數，也就是說，不可以使用new命令，否則會拋出一個錯誤；

• 不可以使用arguments對象，該對象在函數體內不存在。如果要用，可以用 rest 參數代替

• 不可以使用yield命令，因此箭頭函數不能用作 Generator 函數。

以上是“ES6基礎中字符串和函數的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！