es6 字符串的扩大

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"
    原文作者:me_zhazha
    原文地址: https://segmentfault.com/a/1190000017867918
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞