本文摘自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字符串超实用的知识介绍的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
vue混入的相关操作介绍(附示例)
javascript语言的组成有哪些
javascript怎么实现字符串替换星号
你必须知道的10个chrome开发工具和技巧
javascript:世界上最被误解的语言
javascript创建新节点方法是什么
javascript数组如何删除指定元素
5个有用的css函数(分享)
快来看看 ajax实时刷新处理
javascript中类型检查:typeof和instanceof操作符的区别
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » ES6字符串超实用的知识介绍