es6 字串的擴充套件

me_zhazha發表於2019-01-12
字串套件
es6字串新增了很多新功能，當然也有很多關於字串編碼的一些學習性東西，在這裡咱們就不多做介紹，
介紹一下常用的一些方法

字串的遍歷介面

es6中字串擴充套件了遍歷器介面

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

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

那我們來試一下陣列型別,會像我們預想的那樣會得到遍歷的值

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

看一下物件的型別的遍歷
for(let i of {a:1,b:2}){
    console.log(i) // 報錯
}

上面遍歷物件是會報錯的，因為for of 是不能直接列舉普通物件的，除非這個物件有Iterator介面才能使用，Iterator介面在這裡就不多說了，以後的文章會對它進行講解的

for of 迴圈遍歷器還可以配合break(直接跳出) continue（跳出繼續執行） return （在函式內使用）配合使用跳出迴圈
for (let a of '123456') {
    if (a ==='1') {
        break
    }
    console.log(a) // 1
}

有時間的話大家不妨可以試一下

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


es5中提供了indexOf方法來確定查詢的字串是否在其中，現在又多了三個，是不是很開心！！！

  1. includes方法返回布林值，是否在字串其中

       let str = 'this is es6'
   str.includes('es6')// true
   這個方法還支援第二個引數，那就是選擇位置搜尋，從0開始算，空格也會算位置,是從當前位置往後搜尋，也算當前的位置
   let str = 'this is es6'
   str.includes('i'， 5) // true
   搜尋多個也是可以的，當然如果位置超過es6的真實位置會查詢不到
   str.includes('es6', 5) // true

  2. startsWith方法返回布林值，是否在字串的頭部

       let str = 'is heard'
   str.startsWith('is') // true
   
   str.startsWith('i') // true
   
   str.startsWith('is heard') // true
   
   str.startsWith('h') // false
   
   上邊的第三個為什麼也算頭部，在我看來因為把is heaed 看做了整體所以都算頭部，而最後一個false是因為在is heard查詢h所以h不算是頭部
   
   這個方法也是有第二個引數的
   str.startsWith('i'， 0) // true
   str.startsWith('is'， 0) // true
   str.startsWith('is'， 1) // false

  3. endsWith方法返回布林值，是否在字串的尾部

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

    其實這個和上邊的方法startsWith差不多少隻不過這個是查詢的尾部，那個是查詢的頭部

repeat 重複返回一個新的字串，重複多少次取決於你的引數

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

因為不能小於-1，才會報錯
'abc154789'.repeat(-1) //報錯

大於-1的話會被取整為0，所以會是空的字串
'abc154789'.repeat(-0.9999999999) //“”

NaN也會被當做為0處理
'NaN'.repeat(NaN) // ""

引數也可以為字串,但是也是空因為下面的字串會被轉為NaN
'hhh'.repeat('cc') // ''

padStart()，padEnd()Es7的字串自動補全功能

padStart 我們來先說一下頭部補全

'aa'.padStart(5, 'xc') // xcxaa
'啊！'.padStart(4, '你好') // "你好啊！"
'好看'.padStart(4, '你長得真') // "你長好看"
'好看'.padStart(4) // "   看"
上面的例子是第一個引數是5，表示要5個字元，第二個引數是補全的引數，從頭部補全xcx,’aa‘是不會變的，當然倒數第二個第一個引數也算限制了文字，所以會從左到右選取剩餘的長度，最後一個的話沒有第二個引數會按四個空格

我們來看看從後面補全，其實機制和從頭部補全差不多，看一下例子
'aa'.padEnd(5, 'xc') // aaxcx
'啊！'.padEnd(4, '你好') // "啊！你好"

模板字串

我們先來看一下什麼是字串模板,注意不要用單雙引號，要用··，對就是那個
  1. 普通的字串模板
    ·this is 啊啊啊啊·
  2. 多行文字的字串模板
    ·哈哈哈，你好啊
    我是哈哈·
  3. 變數的模板字串
    let a = '你好'
    ${a}啊 // 你好啊

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

  4. 還可以使用函式，但是得把你需要的return出來
    function add () {

       return 123

    }
    ${add()}456 // 123456

  5. 模板編譯
    let a = `
    <ul>

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

    </ul>`

    上面會被輸出為
    <ul>

       <li>0</li>
   <li>1</li>
   <li>2</li>

    </ul>

    我們再來看看下面這個,你們猜函式會執行嗎
    let html = `
    <div>

       <h5 @click=${add()}>5</h5>
   <h4>4</h4>
   <h3>3</h3>
   <h2>2</h2>

    </div>
    `
    function add() {

       alert(123)

    }

String.raw字串的模板

 let s1 = 'qwe', s2 = '123'
 String.raw`${ s1 + s2 }` // qwe123
 
 下面這種是左邊的引數會被分為['h','e','l','l','o'],然後就是左邊一個引數逗號右邊一個開始補
 String.raw（{raw: 'hello'}, 123）// h123ello
 
 第二個引數為物件的話是不會被分解的哦
 String.raw({ raw: 'hello' }, {aa: 'ooo'});"h[object Object]ello"

相關文章