es6 문자열의 새로운 지식 소개(코드 예)

이 기사는 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) // 报错
}

An for는 일반 객체를 직접 열거할 수 없기 때문에 위의 객체를 탐색할 때 오류가 보고됩니다. 객체에 Iterator 인터페이스가 없으면 Iterator 인터페이스를 사용할 수 없습니다.

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

시간이 있으면 시도해 보세요

String include(), startWith(), endWith() 메서드

es5는 찾고 있는 문자열이 포함되어 있는지 확인하는 indexOf 메서드를 제공합니다. 이제 셋이 더 생겼는데, 정말 행복하지 않나요! ! !

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

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

사실 이 메소드와 위의 startWith 메소드는 검색의 꼬리이고 검색의 선두라는 점을 제외하면 거의 동일합니다.

repeat는 반복적으로 새로운 결과를 반환합니다. string, 횟수는 매개변수에 따라 다릅니다

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

padStart(), padEnd( )Es7의 문자열 자동 완성 기능

参数是 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') // ''

template string

먼저 문자열 템플릿이 무엇인지 살펴보겠습니다. 작은 따옴표나 큰 따옴표를 사용하되... 맞습니다.

일반 문자 문자열 템플릿

·이것은 아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아... , 안녕하세요

저는 ㅎㅎ·

변수 템플릿 문자열

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

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

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

함수를 사용할 수도 있지만 필요한 것을 반환해야 합니다

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

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

템플릿 컴파일

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

위는 다음과 같이 출력됩니다

  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>

String.raw string template

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

위 내용은 es6 문자열의 새로운 지식 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!