ES6字符串?dāng)U展增加了哪些?

1、對Unicode 的支持:codePointAt()、fromCodePoint()
在ES5中,我們經(jīng)常使用charAt() 來表示字符存儲位置,用charCodeAt() 來表示對應(yīng)位置字符Unicode 的編碼。在JavaScript 內(nèi)部,字符以UTF-16 的形式存儲,每個字符固定為2個字節(jié),對于那些需要4個字節(jié)存儲的字符并不支持。因此,ES6使用 codePointAt() 方法來支持存儲4字節(jié)的字符:

var s = '猿';
console.log(s.codePointAt(0)); // 29503

在 ES5 中,從碼點返回對應(yīng)的字符的方法是 fromCharCode(),這個并不能返回字符為32位的utf-16 的字符。ES6 中使用 String.fromCodePoint() 代替:

console.log(String.fromCodePoint(29503)); // 猿

2、字符串的遍歷接口: for..of...

for(let str of 'yuan') {
   console.log(str);
}
// y
// u
// a
// n

3、判斷字符串是否包含在另一個字符串中
在ES5 中使用的是 indexOf() 方法,在ES6中可以使用includes()、startsWith()、endsWith()三個方法。
includes(): 返回布爾值,表示是否找到了參數(shù)字符串。
startsWith():返回布爾值,參數(shù)是否在源字符串的頭部。
endsWith(): 返回布爾值,參數(shù)是否在源字符串的尾部。

var str = "yuan is an animal";
str.startsWith("is"); // false
str.endsWith(" animal"); // true
str.includes("an"); // true

接受第二個參數(shù),可選的,表示開始搜索的位置。

var str = "yuan is an animal";
str.startsWith("a", 1); // false
str.endsWith("an", 3); // false
str.includes("w", 4); // false

使用第二個參數(shù)n時,endsWith() 指的是針對前n 個字符,二其它兩個方法是指開始位置的字符到結(jié)束位置的字符。
4、字符串重復(fù)復(fù)制:repeat();
repeat() 方法返回一個新字符串,表示將院字符串重復(fù)n 次。

'o'.repeat(3); // 'ooo'
'ha'.repeat(2); // 'haha'
'yuan'.repeat(0); ''

注意:當(dāng)repeat() 方法里的參數(shù)為小數(shù)時,會自動取整;為負數(shù)或者Infinity 時會報錯;參數(shù)接近為0時,參數(shù)為0;參數(shù)為NaN、字符串時會先轉(zhuǎn)化為Number 再進行轉(zhuǎn)化。
5、字符串補全:padStart()、padEnd()
表達式:str.padEnd(targetLength [, padString])
第一個參數(shù)targetLength 表示指定字符串的長度,第二個參數(shù)padString(可選)表示用來補全的字符串。
其它注意事項參照:
padStart():用于頭部補全。
padEnd():用于尾部補全。

's'.padStart(4, 'ab'); // 'abas'
's'.padEnd(7, 'dd2'); // '7dd2dd2'

6、模板字符串
語法:

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

模板字符串使用反引號()來代替普通字符串的單引號和雙引號。模板字符串可以包含特定語法(${expression})的占位符。占位符中的表達式和周圍的文本會一起傳遞給一個默認的函數(shù),該函數(shù)負責(zé)將所有的部分連接起來,如果模板字符串由表達式開頭,則該字符串被稱為帶標(biāo)簽的模板字符串,該表達式通常是一個函數(shù),它會在模板字符串處理后被調(diào)用,在輸出最終結(jié)果前,你都可以通過該函數(shù)來對模板字符串進行操作處理,在模板字符中使用反引號(`)時,需要在它前面加上轉(zhuǎn)義符(\)。
多行字符串

console.log(`string text line 1
string text line 2`)
// string text line 1
// string text line 2

表達式插補

var a = 2;
var b = 4;
console.log(`${a + b} is six`) // 6 is six

帶標(biāo)簽的模板字符串
更高級的形式模板字面值被標(biāo)記模板文本。標(biāo)記使您可以分析模板文本功能。標(biāo)記功能的第一個參數(shù)包含一個字符串值的數(shù)組。其余參數(shù)時相關(guān)的表達式。最后,你的函數(shù)可以返回處理好的字符串。

var person = 'Mike';
var age = 28;
function tagFunc(strings, personExp, ageExp) {

  var str0 = strings[0]; // "that "
  var str1 = strings[1]; // " is a "

  // 在技術(shù)上,有一個字符串在
  // 最終的表達式 (在我們的例子中)的后面,
  // 但它是空的(""), 所以被忽略.
  // var str2 = strings[2];

  var ageStr;
  if (ageExp > 60){
    ageStr = 'old person';
  } else {
    ageStr = 'young person';
  }
  return str0 + personExp + str1 + ageStr;
}
var output = myTag`that ${ person } is a ${ age }`;
console.log(output);    // that Mike is a young person

rest 參數(shù)的寫法

let name = '張三',
    age = 20,
    message = show`我來給大家介紹:${name}的年齡是${age}.`;

function show(stringArr,...values){
  let output ="";
  let index = 0
  for(;index<values.length;index++){
        output += stringArr [index]+values[index];
    }
    output += stringArr [index];
    return output;
}
message;       //"我來給大家介紹:張三的年齡是20."

標(biāo)簽函數(shù)并不一定需要返回一個字符串

function template(strings, ...keys) {
  return (function(...values) {
    var dict = values[values.length - 1] || {};
    var result = [strings[0]];
    keys.forEach(function(key, i) {
      var value = Number.isInteger(key) ? values[key] : dict[key];
      result.push(value, strings[i + 1]);
    });
    return result.join('');
  });
}

var t1Closure = template`${0}${1}${0}!`;
t1Closure('Y', 'A');  // "YAY!" 
var t2Closure = template`${0} ${'foo'}!`;
t2Closure('Hello', {foo: 'World'});  // "Hello World!"

原始字符串
在標(biāo)簽函數(shù)的第一個參數(shù)中,存在一個特殊的屬性raw,我們可以通過它來訪問模板字符串的原始字符串。

function tag(strings, ...values) {
  console.log(strings.raw[0]);
}
tag`strings text line 1 \n string text line 2`;
// strings text line 1 \n string text line 2

此外,使用String.raw()方法創(chuàng)建原始字符串和使用默認的模板函數(shù)和字符串連接創(chuàng)建時一樣的。

String.raw`hello\n${44+44}!`
// "hello\n88!"

戳我博客

章節(jié)目錄

1、ES6中啥是塊級作用域?運用在哪些地方?
2、ES6中使用解構(gòu)賦值能帶給我們什么?
3、ES6字符串?dāng)U展增加了哪些?
4、ES6對正則做了哪些擴展?
5、ES6數(shù)值多了哪些擴展?
6、ES6函數(shù)擴展(箭頭函數(shù))
7、ES6 數(shù)組給我們帶來哪些操作便利?
8、ES6 對象擴展
9、Symbol 數(shù)據(jù)類型在 ES6 中起什么作用?
10、Map 和 Set 兩數(shù)據(jù)結(jié)構(gòu)在ES6的作用
11、ES6 中的Proxy 和 Reflect 到底是什么鬼?
12、從 Promise 開始踏入異步操作之旅
13、ES6 迭代器(Iterator)和 for...of循環(huán)使用方法
14、ES6 異步進階第二步:Generator 函數(shù)
15、JavaScript 異步操作進階第三步:async 函數(shù)
16、ES6 構(gòu)造函數(shù)語法糖:class 類

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容