本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于ES6字符串超实用的知识介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。模板字符串
1.可写多行字符串
2.使用${}添加变量
1 2 3 4 5 6 7 8 9 10 11 12 | let x = 1;
let y = 2;
`${x} + ${y} = ${x + y}`
`${x} + ${y * 2} = ${x + y * 2}`
let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
|
模板字符串之中还能调用函数
1 2 3 4 5 6 | function fn() {
return "Hello World" ;
}
`foo ${fn()} bar`
|
模板字符串甚至还能嵌套
1 2 3 4 5 6 7 8 | const tmpl = addrs => `
<table>
${addrs.map(addr => `
<tr><td>${addr.first}</td></tr>
<tr><td>${addr.last}</td></tr>
`).join( '' )}
</table>
`;
|
标签模板:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | let total = 30;
let msg = passthru `The total is ${total} (${total*1.05} with tax)`;
function passthru (literals) {
let result = '' ;
let i = 0;
while (i < literals.length) {
result += literals[i++];
if (i < arguments.length) {
result += arguments[i];
}
}
return result;
}
msg
|
literals参数为非变量组成的数组,变量原本位置为数组中各元素之间,上面这个例子展示了,如何将各个参数按照原来的位置拼合回去。
- “标签模板”的一个重要应用,就是过滤 HTML 字符串,防止用户输入恶意内容。
实用方法集
1.字符串的遍历器接口
1 2 3 4 5 6 | for (let codePoint of 'foo' ) {
console.log(codePoint)
}
|
2.includes(), startsWith(), endsWith()
1 2 3 4 5 | let s = 'Hello world!' ;
s.startsWith( 'Hello' )
s.endsWith( '!' )
s.includes( 'o' )
|
这三个方法都支持第二个参数,表示开始搜索的位置。
1 2 3 4 5 | let s = 'Hello world!' ;
s.startsWith( 'world' , 6)
s.endsWith( 'Hello' , 5)
s.includes( 'Hello' , 6)
|
上面代码表示,使用第二个参数n时,endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。
3.repeat()
repeat方法返回一个新字符串,表示将原字符串重复n次。
1 2 3 | 'x' .repeat(3)
'hello' .repeat(2)
'na' .repeat(0)
|
4.padStart(),padEnd()
用于头部补全,
用于尾部补全。
1 2 3 4 5 | 'x' .padStart(5, 'ab' )
'x' .padStart(4, 'ab' )
'x' .padEnd(5, 'ab' )
'x' .padEnd(4, 'ab' )
|
1 2 | '12' .padStart(10, 'YYYY-MM-DD' )
'09-12' .padStart(10, 'YYYY-MM-DD' )
|
以上就是ES6字符串超实用的知识介绍的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript隐藏元素的方法有哪些
canvas实现压缩图片的代码示例
javascript字符串转换为日期的方法
如何实现网页标题闪烁效果
深入浅析with的使用
javascript中回文数是什么?怎么判断?
math.max()不带参数会返回什么?为什么?
javascript在nodejs环境下执行机制和事件循环
简单对比,看看typescript中interface和type间的区别
js要怎么学
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » ES6字符串超实用的知识介绍