Introduction to new knowledge in es6 strings (code example)

This article brings you an introduction to the new knowledge (code examples) in es6 strings. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

es6 strings have added many new features. Of course, there are also many learning things about string encoding. We will not introduce them here, but introduce some commonly used methods

String traversal interface

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) // 报错
}

The above traversal object will report an error, because for of cannot directly enumerate ordinary objects, unless the object has an Iterator interface to use, Iterator I won’t go into detail about the interface here. I will explain it in future articles

for of 循环遍历器还可以配合break(直接跳出) continue（跳出继续执行） return （在函数内使用）配合使用跳出循环
for (let a of '123456') {
    if (a ==='1') {
        break
    }
    console.log(a) // 1
}

If you have time, you might as well try it

String includes(), startsWith( ), endsWith() method

es5 provides the indexOf method to determine whether the searched string is in it. Now there are three more, aren't you very happy! ! !

includes method returns a Boolean value, whether it is in the string.

   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

startsWith method returns a Boolean value, whether it is at the head of the string.

   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

endsWith method returns a Boolean value, Whether it is at the end of the string

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

In fact, this is almost the same as the method startsWith above, except that this is the tail of the search, and that is the head of the search

repeat repeatedly returns a new The string, how many times it is repeated depends on your parameters

参数是 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’s string auto-completion function

padStart 我们来先说一下头部补全

'aa'.padStart(5, 'xc') // xcxaa
'啊！'.padStart(4, '你好') // "你好啊！"
'好看'.padStart(4, '你长得真') // "你长好看"
'好看'.padStart(4) // "   看"
上面的例子是第一个参数是5，表示要5个字符，第二个参数是补全的参数，从头部补全xcx,’aa‘是不会变的，当然倒数第二个第一个参数也算限制了文字，所以会从左到右选取剩余的长度，最后一个的话没有第二个参数会按四个空格

我们来看看从后面补全，其实机制和从头部补全差不多，看一下例子
'aa'.padEnd(5, 'xc') // aaxcx
'啊！'.padEnd(4, '你好') // "啊！你好"

Template string

Let’s first take a look at what a string template is. Be careful not to use single or double quotes. Use..., that’s right.

Ordinary string template

·This is Ahhhhh·

String template for multi-line text

·Hahaha, hello Ah
I am Haha·

Template string for variables

let a = '你好'
${a}啊 // 你好啊

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

You can also use functions, but you have to return what you need

  function add () {   return 123
}
${add()}456 // 123456

Template compilation

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

The above will be output as

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

Let’s take a look at the following one again. Do you think the function will be executed?

 let html = `
   <p>
   <h5 @click=${add()}>5</h5>
   <h4>4</h4>
   <h3>3</h3>
   <h2>2</h2>
</p>
   `
   function add() {
   alert(123)
}

String.raw string template

 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"

The above is the detailed content of Introduction to new knowledge in es6 strings (code example). For more information, please follow other related articles on the PHP Chinese website!