es6快速入门(1)--字符串的扩展
来源:互联网 发布:加工中心半圆怎么编程 编辑:程序博客网 时间:2024/06/05 00:49
string
1、charAt方法,返回字符串给定位置的字符
▲▲'abc'.charAt(0) // "a"
2、includes(), startsWith(), endsWith()
传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。
▲▲includes():返回布尔值,表示是否找到了参数字符串。startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
这三个方法都支持第二个参数,表示开始搜索的位置。
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) // ""
- 参数如果是小数,会被取整。
- 如果repeat的参数是负数或者Infinity,会报错。
- 如果repeat的参数是字符串,则会先转换成数字。
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'
上面代码中,padStart和padEnd一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。
如果省略第二个参数,默认使用空格补全长度。
'1'.padStart(10, '0') // "0000000001"'12'.padStart(10, '0') // "0000000012"'123456'.padStart(10, '0') // "0000123456"
padStart的常见用途是为数值补全指定位数。上面代码生成 10 位的数值字符串。
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"
另一个用途是提示字符串格式。
5、模板字符串▲▲
传统的 JavaScript 语言,输出模板通常是这样写的。
$('#result').append( 'There are <b>' + basket.count + '</b> ' + 'items in your basket, ' + '<em>' + basket.onSale + '</em> are on sale!');
上面这种写法相当繁琐不方便,ES6 引入了模板字符串解决这个问题。
$('#result').append(` There are <b>${basket.count}</b> items in your basket, <em>${basket.onSale}</em> are on sale!`);
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
$('#list').html(`<ul> <li>first</li> <li>second</li></ul>`.trim());
上面代码中,所有模板字符串的空格和换行,都是被保留的,比如
- 标签前面会有一个换行。如果你不想要这个换行,可以使用trim方法消除它。
模板字符串中嵌入变量,需要将变量名写在${}之中。
大括号内部可以放入任意的 JavaScript 表达式,可以进行运算,以及引用对象属性。
function fn() { return "Hello World";}`foo ${fn()} bar`// foo Hello World bar
模板字符串之中还能调用函数。
const tmpl = addrs => ` <table> ${addrs.map(addr => ` <tr><td>${addr.first}</td></tr> <tr><td>${addr.last}</td></tr> `).join('')} </table>`;
模板字符串甚至还能嵌套。
// 写法一let str = 'return ' + '`Hello ${name}!`';let func = new Function('name', str);func('Jack') // "Hello Jack!"// 写法二let str = '(name) => `Hello ${name}!`';let func = eval.call(null, str);func('Jack') // "Hello Jack!"
如果需要引用模板字符串本身,在需要时执行,可以像上面这样写。
6、模板编译
略
阅读全文
0 0
- es6快速入门(1)--字符串的扩展
- es6快速入门(2)--数值的扩展
- es6快速入门(3)--函数的扩展
- es6快速入门(4)--数组的扩展
- 《ES6标准入门》:字符串扩展
- 【ES6】字符串的扩展
- 【es6】字符串的扩展
- ES6--字符串的扩展
- es6字符串的扩展
- ES6(三)字符串的扩展
- es6入门(二):解构赋值和字符串的扩展
- es6 chapter4 字符串的扩展
- es6学习--字符串的扩展
- ES6(三) 字符串的扩展
- 18、ES6 字符串的扩展
- es6入门-对象的扩展
- es6字符串扩展(三)
- ES6 —(字符串扩展)
- pom.xml出现web.xml is missing and <failOnMissingWebXml> is set to true解决方案
- 从JDK源码看字节流和字符流
- 【大数据】数学基础及应用
- Android图片添加阴影效果的两种方式
- 利用sftp进行远程ssh的上传下载
- es6快速入门(1)--字符串的扩展
- 自定义分页
- vscode bug
- 今日头条TabLayout+Fragment
- SSH(Struts,Spring,Hibernate)和SSM(SpringMVC,Spring,MyBatis)的区别
- Python之路【第十篇】:HTML
- UISlider
- 12.19早课
- MAC OS Cocoapods安装更新实战