ES6字符串超实用的知识介绍

本篇文章给大家带来的内容是关于es6字符串超实用的知识介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

模板字符串

1.可写多行字符串

2.使用${}添加变量

let x = 1;let y = 2;`${x} + ${y} = ${x + y}`// "1 + 2 = 3"`${x} + ${y * 2} = ${x + y * 2}`// "1 + 4 = 5"let obj = {x: 1, y: 2};`${obj.x + obj.y}`// "3"

登录后复制

模板字符串之中还能调用函数

function fn() {  return "Hello World";}`foo ${fn()} bar`// foo Hello World bar

登录后复制

模板字符串甚至还能嵌套

const tmpl = addrs => `    ${addrs.map(addr => `      `).join('')}  
${addr.first}
${addr.last}
`;

登录后复制

标签模板:

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 // "The total is 30 (31.5 with tax)"

登录后复制

literals参数为非变量组成的数组,变量原本位置为数组中各元素之间,上面这个例子展示了,如何将各个参数按照原来的位置拼合回去。

“标签模板”的一个重要应用,就是过滤 HTML 字符串,防止用户输入恶意内容。

实用方法集

1.字符串的遍历器接口
for (let codePoint of 'foo') {  console.log(codePoint)}// "f"// "o"// "o"

登录后复制

2.includes(), startsWith(), endsWith()
let s = 'Hello world!';s.startsWith('Hello') // trues.endsWith('!') // trues.includes('o') // true

登录后复制

这三个方法都支持第二个参数,表示开始搜索的位置。

let s = 'Hello world!';s.startsWith('world', 6) // trues.endsWith('Hello', 5) // trues.includes('Hello', 6) // false

登录后复制

上面代码表示,使用第二个参数n时,endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。

3.repeat()

repeat方法返回一个新字符串,表示将原字符串重复n次。

'x'.repeat(3) // "xxx"'hello'.repeat(2) // "hellohello"'na'.repeat(0) // ""

登录后复制

4.padStart(),padEnd()

padStart()

登录后复制

用于头部补全,

padEnd()

登录后复制

用于尾部补全。

'x'.padStart(5, 'ab') // 'ababx''x'.padStart(4, 'ab') // 'abax''x'.padEnd(5, 'ab') // 'xabab''x'.padEnd(4, 'ab') // 'xaba'

登录后复制

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

登录后复制

 

以上就是ES6字符串超实用的知识介绍的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2732597.html

(0)
上一篇 2025年3月8日 00:46:41
下一篇 2025年3月8日 00:46:50

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论