es6 字符串String的擴展(實例講解)

新特性：模板字符串

傳統字符串

let name = "Jacky";
let occupation = "doctor";
 //傳統字符串拼接
let str = "He is "+ name +",he is a "+ occupation;

es6簡潔的字符串拼接

let name = "Jacky";
let occupation = "doctor";
//模板字符串拼接
let str = `He is ${name},he is a ${occupation}`;

對比兩段拼接的代碼，模板字符串使得我們不再需要反復使用雙引號（或者單引號）了；而是改用反引號標識符（`），插入變量的時候也不需要再使用加號（+）了，而是把變量放入${ }即可。

使用時要注意

1、可以定義多行字符串

傳統的多行字符串寫法：

let str = "write once ," +
 "run anywhere";

模板字符串的寫法：

 let str = `write once ,
 run anywhere`;

直接換行即可，但是要注意的是：所有的空格和所進都會被保留在輸出中。如果控制臺輸出字符串str的話，代碼上換了行，控制臺輸出的時候也會換行。

2、${ }中可以放任意的javascript表達式

${ }中可以是運算表達式

var a = 1;
var b = 2;
var str = `the result is ${a+b}`;
//進行加法運算 結果：the result is 3

${ }中可以是對象的屬性

var obj = {"a":1,"b":2};
var str = `the result is ${obj.a+obj.b}`;
//對象obj的屬性
//結果：the result is 3.

${ }中可以是函數的調用

function fn() {
return 3;
}
var str = `the result is ${ fn() }`;
//函數fn的調用，結果：the result is 3

標簽模板

這里的模板指的是上面講的字符串模板，用反引號定義的字符串；而標簽，則指的是一個函數，一個專門處理模板字符串的函數。

var name = "張三";
var height = 1.8;

tagFn`他叫${name},身高${height}米。`;
//標簽+模板字符串

//定義一個函數，作為標簽
function tagFn(arr,v1,v2){
console.log(arr); 
//結果：[ "他叫","，身高","米。" ]
console.log(v1); 
//結果：張三
console.log(v2); 
//結果：1.8
}

以上代碼有兩處要仔細講解的，首先是tagFn函數，是我們自定義的一個函數，它有三個參數分別是arr，v1，v2。函數tagFn的調用方式跟以往的不太一樣，以往我們使用括號( )表示函數調用執行，這一次我們在函數名后面直接加上一個模板字符串，如下面的代碼：

tagFn`他叫${name},身高${height}米。`;

這樣就是標簽模板，你可以理解為標簽函數+模板字符串，這是一種新的語法規范。

接下來我們繼續看函數的3個參數，從代碼的打印結果我們看到它們運行后對應的結果，arr的值是一個數組：[ "他叫" , "，身高" , "米。" ]，而v1的值是變量name的值：“張三”，v2的值是變量height的值：1.8。

你是否看出規律了：第一個參數arr是數組類型，它是內容是模板字符串中除了${ }以外的其他字符，按順序組成了數組的內容，所以arr的值是[ "他叫", "，身高" , "米。" ]；第2,3個參數則是模板字符串中對應次序的變量name和height的值。

標簽模板是ES6給我們帶來的一種新語法，它常用來實現過濾用戶的非法輸入和多語言轉換，這里不展開講解。因為一旦我們掌握了標簽模板的用法后，以后就可以好好利用它的這個特性，再根據自己的需求要來實現各種功能了。

ES6新的String函數

repeat( )函數：將目標字符串重復N次，返回一個新的字符串，不影響目標字符串。

var name1 = "王漢炎"; //目標字符串
var name2 = name1.repeat(3);
//變量name1被重復三次；

console.log(name1); 
//結果：王漢炎

console.log(name2);
//結果：王漢炎王漢炎王漢炎

includes( )函數：判斷字符串中是否含有指定的子字符串，返回true表示含有和false表示未含有。第二個參數選填，表示開始搜索的位置。

var name = "王漢炎";//目標字符串
name.includes('炎'); 
//true, 含有

name.includes('web'); 
//false, 不含有

name.includes('王',1); 
//false, 從第2個字符開始搜索, 不含有

傳統的做法我們可以借助indexOf( )函數來實現，如果含有指定的字符串，indexOf( )函數就會子字符串首次出現的位置，不含有，則返回-1。我們通過返回值是否為-1來判斷字符串中是否含有指定的子字符串，但是，我們現在可以用includes( )函數代替indexOf( )函數，因為它的返回值更直觀（true或false），況且我們并不關心子字符串出現的位置。

startsWith( )函數：判斷指定的子字符串是否出現在目標字符串的開頭位置，第二個參數選填，表示開始搜索的位置。

var name = "王漢炎"; //目標字符串

name.startsWith('王'); 
//true，出現在開頭位置

name.startsWith('漢'); 
//false，不是在開頭位置

name.startsWith('漢',1); 
//true，從第2個字符開始

endsWith( )函數：判斷子字符串是否出現在目標字符串的尾部位置，第二個參數選填，表示針對前N個字符。

var name = "我就是王漢炎";//目標字符串

name.endsWith('我');
//false，不在尾部位置

name.endsWith('炎'); 
//true，在尾部位置

name.endsWith('炎',5); 
//false，只針對前5個字符

name.endsWith('炎',6);
//true，針對前6個字符

javascript中，一個字符固定為2個字節，對于那些需要4個字節存儲的字符，javascript會認為它是兩個字符，此時它的字符長度length為2。如字符："𠮷"，就是一個需要4個字節存儲，length為2的字符。這會有什么問題呢？對于4字節的字符， javascript無法正確讀取字符，我們來試試看。

var str1 = "前端";
var str2 = "𠮷";

str1.length; //length為2
str2.length; //length為2

str1.charAt(0); //前
str1.charAt(1); //端

str2.charAt(0); //'�'
str2.charAt(1); //'�'

可以看到，str1和str2的長度length都是2，因為字符："𠮷"是一個4字節的字符，使用charAt函數（charAt() 方法可返回指定位置的字符）能正確讀取字符串str1的字符，但無法正確讀取4個字節的字符,此時返回結果出現了亂碼。

但是，如果我們使用ES6給我們提供的codePointAt( )函數，就可以處理這種4個字節的字符了，我們來看看怎么使用

var str = "𠮷";
str.codePointAt(); //結果:134071

對于這個長度length為2字符："𠮷"，codePointAt( )方法可以正確地識別出它是個4個字節的字符，并且能正確地返回它的碼點的十進制數：134071，這個數字抓換成16進制就是20bb7，對應的Unicode編碼則是\u20bb7。

String.fromCodePoint( )函數：函數的參數是一個字符對應的碼點，返回的結果就是對應的字符，哪怕這個字符是一個4字節的字符，也能正確實現。

正好可以利用上面得到的10進制數字134071反推一下。

String.fromCodePoint(134071); //結果："𠮷"
String.raw( )函數；看函數名raw是未加工的的意思，正如這個函數的作用一樣：返回字符串最原始的樣貌，即使字符串中含有轉義符，它都視而不見，直接輸出。

 console.log(`hello\nworld`);
//

總結：ES6給字符串帶來了很多實用性的擴展：模板字符串，標簽模板，repeat函數、includes函數，startsWith函數，endsWith函數，codePointAt函數，String.fromCodePoint函數，String.raw函數。

以上這篇es6 字符串String的擴展(實例講解)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com