ホームページ >ウェブフロントエンド >jsチュートリアル >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) // 报错 }上記のトラバーサル オブジェクトはエラーを報告します。オブジェクトに使用する Iterator インターフェイスがない限り、 for は通常のオブジェクトを直接列挙できないためです。Iterator については説明しません。インターフェイスの詳細については、今後の記事で説明します。
for of 循环遍历器还可以配合break(直接跳出) continue(跳出继续执行) return (在函数内使用)配合使用跳出循环 for (let a of '123456') { if (a ==='1') { break } console.log(a) // 1 }時間があれば、試してみるとよいでしょう。
String contains(), startingWith( ), endsWith () メソッド
es5 には、検索された文字列が含まれているかどうかを判断するための IndexOf メソッドが用意されています。さらに 3 つあります。とてもうれしいですね。 ! ! 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
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 は新しい文字列を繰り返し返します。繰り返される回数はパラメータによって異なります
let str = 'is last' str.endsWith('t') //true str.endsWith('st') //true, str.endsWith('s') //falsepadStart()、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') // ''テンプレート文字列 まず、文字列テンプレートとは何かを見てみましょう。一重引用符や二重引用符を使用しないように注意してください。 通常の文字列テンプレート
·これはああああ ·
複数行テキスト用の文字列テンプレート
·ははは、こんにちは、ああ私ははは ·
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 中国語 Web サイトの他の関連記事を参照してください。