Introduction aux nouvelles connaissances sur les chaînes es6 (exemple de code)

Cet article vous apporte une introduction aux nouvelles connaissances (exemples de code) dans les chaînes es6. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Les chaînes ES6 ont ajouté de nombreuses nouvelles fonctionnalités. Bien sûr, il existe également de nombreuses choses à apprendre sur l'encodage des chaînes. Nous ne les présenterons pas ici et présenterons certaines méthodes couramment utilisées

Interface de traversée de chaînes

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

L'objet de traversée ci-dessus signalera une erreur, car for of ne peut pas énumérer directement les objets ordinaires, à moins que l'objet n'ait une interface Iterator, je n'entrerai pas dans les détails. à propos de l'interface Iterator ici. Je l'expliquerai dans les prochains articles

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

Si vous avez le temps, vous pouvez aussi bien l'essayer

String include(), startWith(). , méthodes endWith() es5 fournit la méthode indexOf pour déterminer si la chaîne recherchée s'y trouve. Maintenant, il y en a trois autres, n'êtes-vous pas très content ! ! !

la méthode include renvoie une valeur booléenne, qu'elle soit dans la chaîne

   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

la méthode startsWith renvoie une valeur booléenne, qu'elle soit en tête de la chaîne

   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

Méthode endsWith Renvoie une valeur booléenne, que ce soit à la fin de la chaîne

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

En fait, c'est presque la même chose que la méthode StartWith ci-dessus, sauf que c'est la fin de la chaîne search, et c'est la tête de la recherche

repeat renvoie une nouvelle chaîne à plusieurs reprises. Le nombre de fois qu'elle est répétée dépend de vos paramètres

参数是 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. (), la fonction d'auto-complétion de chaîne de 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, '你好') // "啊！你好"

Chaîne de modèle

Voyons d'abord ce qu'est un modèle de chaîne. Attention à ne pas utiliser de guillemets simples ou doubles. . Utilisez..., c'est vrai

Modèle de chaîne ordinaire

·c'est ahhhh·

Modèle de chaîne pour texte multiligne

·Hahaha, bonjour

Je suis Haha·

La chaîne modèle de la variable

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

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

peut également être utilisé en fonction, mais vous devez renvoyer ce dont vous avez besoin

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

Compilation de modèles

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

Ce qui précède sera affiché sous la forme

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

Regardons à nouveau le suivant, pensez-vous que la fonction sera exécutée ?

 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 modèle

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!