Heim > Web-Frontend > js-Tutorial > Hauptteil

Einführung in neues Wissen in es6-Strings (Codebeispiel)

不言
Freigeben: 2019-01-14 09:58:10
nach vorne
2396 Leute haben es durchsucht

Dieser Artikel bietet Ihnen eine Einführung in das neue Wissen (Codebeispiele) in es6-Strings. Ich hoffe, dass er für Freunde in Not hilfreich ist.

ES6-Strings haben viele neue Funktionen hinzugefügt. Natürlich gibt es auch viele Lerninhalte zur String-Codierung. Wir werden sie hier nicht vorstellen und einige häufig verwendete Methoden vorstellen >String-Traversal-Schnittstelle

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) // 报错
}
Nach dem Login kopieren
Das obige Traversal-Objekt meldet einen Fehler, da es normale Objekte nicht direkt auflisten kann, es sei denn, das Objekt verfügt über eine zu verwendende Iterator-Schnittstelle. Iterator Ich werde nicht auf Details eingehen über die Schnittstelle hier. Ich werde es in zukünftigen Artikeln erklären
for of 循环遍历器还可以配合break(直接跳出) continue(跳出继续执行) return (在函数内使用)配合使用跳出循环
for (let a of '123456') {
    if (a ==='1') {
        break
    }
    console.log(a) // 1
}
Nach dem Login kopieren
Wenn Sie Zeit haben, können Sie es auch versuchen

String Includes(), StartsWith( ), EndsWith( ) Methode

es5 stellt die indexOf-Methode bereit, um festzustellen, ob die gesuchte Zeichenfolge darin enthalten ist. Sind Sie nicht sehr zufrieden? ! ! Die Methode includes gibt einen booleschen Wert zurück, unabhängig davon, ob sie sich in der Zeichenfolge befindet. Die Methode

   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
Nach dem Login kopieren

startsWith gibt einen booleschen Wert zurück, unabhängig davon, ob sie sich am Anfang der Zeichenfolge befindet Die Methode „
   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
Nach dem Login kopieren

endsWith“ gibt einen booleschen Wert zurück.

   let str = 'is last'
   str.endsWith('t') //true
   str.endsWith('st') //true,
   str.endsWith('s') //false
Nach dem Login kopieren

Tatsächlich ist dies fast dasselbe wie die Methode „startsWith“ oben, außer dass dies das Ende der Suche ist , und das ist der Kopf der Suche.

repeat gibt wiederholt eine neue Zeichenfolge zurück. Wie oft sie wiederholt wird, hängt von Ihren Parametern ab

参数是 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') // ''
Nach dem Login kopieren

padStart( ), padEnd() Es7s String-Autovervollständigungsfunktion

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

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

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

Sehen wir uns zunächst an, was eine String-Vorlage ist. Achten Sie darauf, keine einfachen oder doppelten Anführungszeichen zu verwenden. .., das ist richtig.

Gewöhnliche String-Vorlage

·Das ist ahhhh·

String-Vorlage für mehrzeiliger Text

·Hahaha, hallo AhIch bin haha·

Vorlagenzeichenfolge für Variablen

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

let str = 'this is'
${str}模板 // this is 模板
Nach dem Login kopieren

Sie können auch Funktionen verwenden, müssen aber zurückgeben, was Sie benötigen

  function add () {   return 123
}
${add()}456 // 123456
Nach dem Login kopieren

Vorlagenkompilierung

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

Das Obige wird ausgegeben als

 <ul>   
   <li>0</li>
   <li>1</li>
   <li>2</li>
</ul>
Nach dem Login kopieren
Schauen wir uns noch einmal das Folgende an: Glaubst du, dass die Funktion ausgeführt wird?

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

String.raw-String-Vorlage

 let s1 = &#39;qwe&#39;, s2 = &#39;123&#39;
 String.raw`${ s1 + s2 }` // qwe123
 
 下面这种是左边的参数会被分为[&#39;h&#39;,&#39;e&#39;,&#39;l&#39;,&#39;l&#39;,&#39;o&#39;],然后就是左边一个参数逗号右边一个开始补
 String.raw({raw: &#39;hello&#39;}, 123)// h123ello
 
 第二个参数为对象的话是不会被分解的哦
 String.raw({ raw: &#39;hello&#39; }, {aa: &#39;ooo&#39;});"h[object Object]ello"
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonEinführung in neues Wissen in es6-Strings (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage