es6 字符串的擴(kuò)展

Euphoria 發(fā)布于2019-08-23 14:40 / 2148人閱讀

摘要：字符串添加了很多新功能，當(dāng)然也有很多關(guān)于字符串編碼的一些學(xué)習(xí)性東西，在這里咱們就不多做介紹，介紹一下常用的一些方法字符串的遍歷接口中字符串?dāng)U展了遍歷器接口其實(shí)看起來和其他的遍歷長的挺像的，那我們來看看它是否除了能遍歷字符串之外，還能否遍歷其

es6字符串添加了很多新功能，當(dāng)然也有很多關(guān)于字符串編碼的一些學(xué)習(xí)性東西，在這里咱們就不多做介紹，
介紹一下常用的一些方法

字符串的遍歷接口

es6中字符串?dāng)U展了遍歷器接口

for(let i of "abcdef"){
    console.log(i) // a,b,c,d,e,f
}

其實(shí)看起來和其他的遍歷長的挺像的，那我們來看看它是否除了能遍歷字符串之外，還能否遍歷其它類型呢

那我們來試一下數(shù)組類型,會(huì)像我們預(yù)想的那樣會(huì)得到遍歷的值

for(let i of [1,2,3]){
    console.log(i) // 1,2,3
}

看一下對象的類型的遍歷
for(let i of {a:1,b:2}){
    console.log(i) // 報(bào)錯(cuò)
}

上面遍歷對象是會(huì)報(bào)錯(cuò)的，因?yàn)閒or of 是不能直接枚舉普通對象的，除非這個(gè)對象有Iterator接口才能使用，Iterator接口在這里就不多說了，以后的文章會(huì)對它進(jìn)行講解的

for of 循環(huán)遍歷器還可以配合break(直接跳出) continue（跳出繼續(xù)執(zhí)行） return （在函數(shù)內(nèi)使用）配合使用跳出循環(huán)
for (let a of "123456") {
    if (a ==="1") {
        break
    }
    console.log(a) // 1
}

有時(shí)間的話大家不妨可以試一下

字符串includes（），startsWith（），endsWith（）方法

es5中提供了indexOf方法來確定查找的字符串是否在其中，現(xiàn)在又多了三個(gè)，是不是很開心！??！

includes方法返回布爾值，是否在字符串其中

   let str = "this is es6"
   str.includes("es6")// true
   這個(gè)方法還支持第二個(gè)參數(shù)，那就是選擇位置搜索，從0開始算，空格也會(huì)算位置,是從當(dāng)前位置往后搜索，也算當(dāng)前的位置
   let str = "this is es6"
   str.includes("i"， 5) // true
   搜索多個(gè)也是可以的，當(dāng)然如果位置超過es6的真實(shí)位置會(huì)查找不到
   str.includes("es6", 5) // true

startsWith方法返回布爾值，是否在字符串的頭部

   let str = "is heard"
   str.startsWith("is") // true
   
   str.startsWith("i") // true
   
   str.startsWith("is heard") // true
   
   str.startsWith("h") // false
   
   上邊的第三個(gè)為什么也算頭部，在我看來因?yàn)榘裪s heaed 看做了整體所以都算頭部，而最后一個(gè)false是因?yàn)樵趇s heard查找h所以h不算是頭部
   
   這個(gè)方法也是有第二個(gè)參數(shù)的
   str.startsWith("i"， 0) // true
   str.startsWith("is"， 0) // true
   str.startsWith("is"， 1) // false

endsWith方法返回布爾值，是否在字符串的尾部

   let str = "is last"
   str.endsWith("t") //true
   str.endsWith("st") //true，
   str.endsWith("s") //false

其實(shí)這個(gè)和上邊的方法startsWith差不多少只不過這個(gè)是查找的尾部，那個(gè)是查找的頭部

repeat 重復(fù)返回一個(gè)新的字符串，重復(fù)多少次取決于你的參數(shù)

參數(shù)是 0 到-1 之間的小數(shù)，則等同于 0，-0也算0
abc.repeat(3)// abcabcabc

因?yàn)椴荒苄∮?1，才會(huì)報(bào)錯(cuò)
"abc154789".repeat(-1) //報(bào)錯(cuò)

大于-1的話會(huì)被取整為0，所以會(huì)是空的字符串
"abc154789".repeat(-0.9999999999) //“”

NaN也會(huì)被當(dāng)做為0處理
"NaN".repeat(NaN) // ""

參數(shù)也可以為字符串,但是也是空因?yàn)橄旅娴淖址畷?huì)被轉(zhuǎn)為NaN
"hhh".repeat("cc") // ""

padStart()，padEnd()Es7的字符串自動(dòng)補(bǔ)全功能

padStart 我們來先說一下頭部補(bǔ)全

"aa".padStart(5, "xc") // xcxaa
"??！".padStart(4, "你好") // "你好?。?
"好看".padStart(4, "你長得真") // "你長好看"
"好看".padStart(4) // "   看"
上面的例子是第一個(gè)參數(shù)是5，表示要5個(gè)字符，第二個(gè)參數(shù)是補(bǔ)全的參數(shù)，從頭部補(bǔ)全xcx,’aa‘是不會(huì)變的，當(dāng)然倒數(shù)第二個(gè)第一個(gè)參數(shù)也算限制了文字，所以會(huì)從左到右選取剩余的長度，最后一個(gè)的話沒有第二個(gè)參數(shù)會(huì)按四個(gè)空格

我們來看看從后面補(bǔ)全，其實(shí)機(jī)制和從頭部補(bǔ)全差不多，看一下例子
"aa".padEnd(5, "xc") // aaxcx
"??！".padEnd(4, "你好") // "??！你好"

模板字符串

我們先來看一下什么是字符串模板,注意不要用單雙引號(hào)，要用··，對就是那個(gè)

普通的字符串模板
·this is 啊啊啊啊·

多行文本的字符串模板
·哈哈哈，你好啊
我是哈哈·

變量的模板字符串
let a = "你好"
${a}啊 // 你好啊

let str = "this is"
${str}模板 // this is 模板

還可以使用函數(shù)，但是得把你需要的return出來
function add () {

   return 123

}
${add()}456 // 123456

模板編譯
let a = `

 <% for(let i=0; i < 3; i++) { %>
   <%= i %>
 <% } %>

上面會(huì)被輸出為

   0
   1
   2

我們再來看看下面這個(gè),你們猜函數(shù)會(huì)執(zhí)行嗎
let html = `

`
function add() {

   alert(123)

}

String.raw字符串的模板

 let s1 = "qwe", s2 = "123"
 String.raw`${ s1 + s2 }` // qwe123
 
 下面這種是左邊的參數(shù)會(huì)被分為["h","e","l","l","o"],然后就是左邊一個(gè)參數(shù)逗號(hào)右邊一個(gè)開始補(bǔ)
 String.raw（{raw: "hello"}, 123）// h123ello
 
 第二個(gè)參數(shù)為對象的話是不會(huì)被分解的哦
 String.raw({ raw: "hello" }, {aa: "ooo"});"h[object Object]ello"

GPU云服務(wù)器云服務(wù)器 es6字符串?dāng)U展對象的擴(kuò)展云計(jì)算的擴(kuò)展服務(wù)器的擴(kuò)展

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100974.html

發(fā)表評論

登陸后可評論

0條評論

Euphoria

男|高級講師

我要關(guān)注我要私信

TA的文章

React Hooks 文檔重大更新！

閱讀 1643·2021-10-27 14:13
為了沒Python的小伙伴兒，我學(xué)會(huì)了程序打包！【保姆級詳細(xì)教學(xué)】

閱讀 1883·2021-10-11 10:59
ZJI：華為云專線E3配置物理機(jī)，終身立減300元，月付低至450元

閱讀 3381·2021-09-24 10:26
多列布局方案整理

閱讀 1937·2019-08-30 12:48
高大上的AMD和CMD的區(qū)別

閱讀 3046·2019-08-30 12:46
Commit message 代碼提交規(guī)范

閱讀 2043·2019-08-30 11:16
柵格GRID: 未來可期更便捷的布局方式

閱讀 1427·2019-08-30 10:48
使用web寫UI, 使用js對接C++項(xiàng)目, 提高開發(fā)效率

閱讀 2749·2019-08-29 16:54

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

es6 字符串的擴(kuò)展

5

4

3

2

相關(guān)文章

***es6學(xué)習(xí)筆記--字符串的擴(kuò)展、數(shù)組的擴(kuò)展、對象的擴(kuò)展***

***ES6入門之對象的擴(kuò)展***

**《ES6標(biāo)準(zhǔn)入門》讀書筆記**

***ES6入門之對象的擴(kuò)展***

***ES6入門之正則的擴(kuò)展***

發(fā)表評論

0條評論

Euphoria

男|高級講師

TA的文章

React Hooks 文檔重大更新！

為了沒Python的小伙伴兒，我學(xué)會(huì)了程序打包！【保姆級詳細(xì)教學(xué)】

ZJI：華為云專線E3配置物理機(jī)，終身立減300元，月付低至450元

多列布局方案整理

高大上的AMD和CMD的區(qū)別

Commit message 代碼提交規(guī)范

柵格GRID: 未來可期更便捷的布局方式

使用web寫UI, 使用js對接C++項(xiàng)目, 提高開發(fā)效率

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

es6 字符串的擴(kuò)展

5

4

3

2

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！