欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ES6学习4章:字符串的扩展

程序员文章站 2022-03-08 22:20:28
...

一 、新增API

目前不常用的API

  • at() ——识别Unicode编号大于0XFFFF的字符,返回正确的字符
  • normalize() 将字符串的不同表示方法统一为同样的形式
  • startWith() 返回boolean , 参数字符串是否在源字符串头部
  • endWith() 返回boolean ,参数字符串是否在源字符串尾部
  • repeat(n) 返回新字符串,表示将原字符串重复n次,n为>0数字,默认向下取整
  • padStart(len,str) 用于头部补全str到最小长度len
  • padEnd(len,str) 用于从尾部补全str到最小长度len

感觉有用的API

# includes()   返回布尔值,表示是否找到了参数字符串   
var s = 'hello world';
s.includes('hello'); //true

模板字符串

  • 反引号(`),加${}模板
  • 作用:可以标识为普通字符串,可以标识多行字符串,可以在字符串中嵌入变量
  • ${} 内可为模板字符串,可用JS运算,也可调用函数
  • 注意:${}的{}内的值应该为字符串,如果不是字符串,将按照一般规则调用toString转为字符串
  • 模板字符串可嵌套
var obj = {
    name:'小明',
    age:18
}
    let tpl=`<div>${obj.name}今年${obj.18}岁了</div>` 
    $('#result').append(tpl)

# 调用函数
function fn(){
    return 'hello world';
}
`foo${fn()} bar`
# {}不为字符串时 
let obj = {name:'hele'}
let tpl = `hello ${obj}`
console.log(tpl) // hello [object object]

# 字符模板嵌套
let addrs = [
    {first: '成都',last:'武侯区'},
    {first: '成都',last:'青羊区'}
]
const tpl = addrs => `
<table>
    ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
    `).join('')}
</table>
`
document.getElementById('box').innerHTML = tpl(addrs);

# 标签模板(跟在函数后)
alert`123`  => alert(123)
相关标签: ES6学习 ES6 es6