es6字符串String的擴(kuò)展(實(shí)例講解)

新特性：模板字符串

10年積累的成都做網(wǎng)站、成都網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先做網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有那坡免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

傳統(tǒng)字符串

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

es6簡(jiǎn)潔的字符串拼接

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

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

使用時(shí)要注意

1、可以定義多行字符串

傳統(tǒng)的多行字符串寫法：

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

模板字符串的寫法：

 let str = `write once ,
 run anywhere`;

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

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

${ }中可以是運(yùn)算表達(dá)式

var a = 1;
var b = 2;
var str = `the result is ${a+b}`;
//進(jìn)行加法運(yùn)算 結(jié)果：the result is 3

${ }中可以是對(duì)象的屬性

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

${ }中可以是函數(shù)的調(diào)用

function fn() {
return 3;
}
var str = `the result is ${ fn() }`;
//函數(shù)fn的調(diào)用，結(jié)果：the result is 3

標(biāo)簽?zāi)０?/strong>

這里的模板指的是上面講的字符串模板，用反引號(hào)定義的字符串；而標(biāo)簽，則指的是一個(gè)函數(shù)，一個(gè)專門處理模板字符串的函數(shù)。

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

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

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

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

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

這樣就是標(biāo)簽?zāi)０?，你可以理解為?biāo)簽函數(shù)+模板字符串，這是一種新的語(yǔ)法規(guī)范。

接下來(lái)我們繼續(xù)看函數(shù)的3個(gè)參數(shù)，從代碼的打印結(jié)果我們看到它們運(yùn)行后對(duì)應(yīng)的結(jié)果，arr的值是一個(gè)數(shù)組：[ "他叫" , "，身高" , "米。" ]，而v1的值是變量name的值：“張三”，v2的值是變量height的值：1.8。

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

標(biāo)簽?zāi)０迨荅S6給我們帶來(lái)的一種新語(yǔ)法，它常用來(lái)實(shí)現(xiàn)過(guò)濾用戶的非法輸入和多語(yǔ)言轉(zhuǎn)換，這里不展開講解。因?yàn)橐坏┪覀冋莆樟藰?biāo)簽?zāi)０宓挠梅ê?，以后就可以好好利用它的這個(gè)特性，再根據(jù)自己的需求要來(lái)實(shí)現(xiàn)各種功能了。

ES6新的String函數(shù)

repeat( )函數(shù)：將目標(biāo)字符串重復(fù)N次，返回一個(gè)新的字符串，不影響目標(biāo)字符串。

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

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

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

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

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

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

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

傳統(tǒng)的做法我們可以借助indexOf( )函數(shù)來(lái)實(shí)現(xiàn)，如果含有指定的字符串，indexOf( )函數(shù)就會(huì)子字符串首次出現(xiàn)的位置，不含有，則返回-1。我們通過(guò)返回值是否為-1來(lái)判斷字符串中是否含有指定的子字符串，但是，我們現(xiàn)在可以用includes( )函數(shù)代替indexOf( )函數(shù)，因?yàn)樗姆祷刂蹈庇^（true或false），況且我們并不關(guān)心子字符串出現(xiàn)的位置。

startsWith( )函數(shù)：判斷指定的子字符串是否出現(xiàn)在目標(biāo)字符串的開頭位置，第二個(gè)參數(shù)選填，表示開始搜索的位置。

var name = "王漢炎"; //目標(biāo)字符串

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

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

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

endsWith( )函數(shù)：判斷子字符串是否出現(xiàn)在目標(biāo)字符串的尾部位置，第二個(gè)參數(shù)選填，表示針對(duì)前N個(gè)字符。

var name = "我就是王漢炎";//目標(biāo)字符串

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

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

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

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

javascript中，一個(gè)字符固定為2個(gè)字節(jié)，對(duì)于那些需要4個(gè)字節(jié)存儲(chǔ)的字符，javascript會(huì)認(rèn)為它是兩個(gè)字符，此時(shí)它的字符長(zhǎng)度length為2。如字符："𠮷"，就是一個(gè)需要4個(gè)字節(jié)存儲(chǔ)，length為2的字符。這會(huì)有什么問(wèn)題呢？對(duì)于4字節(jié)的字符， javascript無(wú)法正確讀取字符，我們來(lái)試試看。

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的長(zhǎng)度length都是2，因?yàn)樽址?𠮷"是一個(gè)4字節(jié)的字符，使用charAt函數(shù)（charAt() 方法可返回指定位置的字符）能正確讀取字符串str1的字符，但無(wú)法正確讀取4個(gè)字節(jié)的字符,此時(shí)返回結(jié)果出現(xiàn)了亂碼。

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

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

對(duì)于這個(gè)長(zhǎng)度length為2字符："𠮷"，codePointAt( )方法可以正確地識(shí)別出它是個(gè)4個(gè)字節(jié)的字符，并且能正確地返回它的碼點(diǎn)的十進(jìn)制數(shù)：134071，這個(gè)數(shù)字抓換成16進(jìn)制就是20bb7，對(duì)應(yīng)的Unicode編碼則是\u20bb7。

String.fromCodePoint( )函數(shù)：函數(shù)的參數(shù)是一個(gè)字符對(duì)應(yīng)的碼點(diǎn)，返回的結(jié)果就是對(duì)應(yīng)的字符，哪怕這個(gè)字符是一個(gè)4字節(jié)的字符，也能正確實(shí)現(xiàn)。

正好可以利用上面得到的10進(jìn)制數(shù)字134071反推一下。

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

 console.log(`hello\nworld`);
//輸出：hello
world
 console.log(String.raw`hello\nwolrd`);
//輸出：hello\nwolrd

總結(jié)：ES6給字符串帶來(lái)了很多實(shí)用性的擴(kuò)展：模板字符串，標(biāo)簽?zāi)０?，repeat函數(shù)、includes函數(shù)，startsWith函數(shù)，endsWith函數(shù)，codePointAt函數(shù)，String.fromCodePoint函數(shù)，String.raw函數(shù)。

以上這篇es6 字符串String的擴(kuò)展(實(shí)例講解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。