字符串常用方法总结
1.ES6提供一种字符串遍历方法for···of···
for( let codePoint of 'foo') {
console.log(codePoint)
}
2.ES5提供了charAt来查找字符串,返回字符串的位置,但这个方法有一定局限性,该方法不能识别大于0xFFFF的字符。ES6提供了at方法来查找字符串,这个方法弥补了charAt的不足
'abc'.at(0) //"a"
3.ES6之前Js只有indexof"一种方法,来确定一个字符串中是否包含另一个字符串。ES6又提供了三种新方法
includes():返回布尔值,表示找到了参数字符串。
startsWith():返回布尔值,表示参数字符串是否在源字符串的头部
endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部
let s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
同时这三种方法都支持第二个参数
let s = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
在上面代码中startsWith,includes第二个参数写开始位置才正确,
endsWith查找从前面开始查找,第二个参数写第一个参数结束位数的下一位才正确。
例如‘o’是第四位。
4.repeat()
repeat方法返回一个新字符串,表示将原字符串重复n次。
‘x’.repeat(3) //”xxx”
‘hello’.repeat(2) //”hellohello”
‘na’.repeat(0) //””
(1)参数如果是小数会被取整
"nana".repeat(2.9) //”nana”
(2)如果repeat的参数是负数或者Infinity,会报错。
'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError
(3)参数是0-1之间的小数,则等同于0,这是因为会进行取整运算,0到-1小数取整以后等于-0,repeat等同于0,参数NaN等同于 0。
'na'.repeat(-0.9) // ""
'na'.repeat(NaN) // ""
(4)如果repeat的参数是字符串,则会先转换成数字。
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"
5.padStart(),padEnd()
ES2017引入字符串补全长度功能。如果某个字符串不够指定长度,可以在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
上面代码中补全都一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数用来补全的字符串
(1)如果原字符串长度,等于或大于指定的最小长度则返回原字符串
'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'
(2)如果用来补全的字符串和原字符串,两个的长度超过了指定的最小长度,则会截去超出的补全字符串
'abc'.padStart(10, '0123456789')
// '0123456abc'
(3)如果省略第二个参数,那么会默认用空格来补全长度
'x'.padStart(4) // ' x'
'x'.padEnd(4) // 'x '
(4)padStart的常见用途是为数值补全指定位数
'1'.padStart(10, '0') // "0000000001"
'123456'.padStart(10, '0') // "0000123456"
6.模板字符串
模板字符串,用反引号(`)标识,改变了以往插入变量、html是繁琐写法。它既可以当普通字符串使用,也可以定义多行字符串,或者在字符串中嵌入变量。
// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
$('#list').html(`
- first
- second
`);
console.log(`string text line 1
string text line 2`);
// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
上面的代码中的都是用反引号来表示模板字符串。使用模板字符串表示多行字符串时它的所有结构都会被保留,也就是说空格和缩进都会被保留。
如果在当中有需要使用反应号,前面可以用反斜杠
转义。
let greeting = `\`Yo\` World!`;
上文也提过模板字符串可以插入变量,ES6规定变量必须写在${ }
当中。
function authorize(user, action) {
if (!user.hasPrivilege(action)) {
throw new Error(
// 传统写法为
// 'User '
// + user.name
// + ' is not authorized to do '
// + action
// + '.'
`User ${user.name} is not authorized to do ${action}.`);
}
}
大括号当中可以放入任何JS表达式,可以进行运算和引用对象属性。当然也可以调用函数
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
注意
(1)模板字符串的变量如果未经声明就是用会报错
// 变量place没有声明
let msg = `Hello, ${place}`;
// 报错
(2)如 果括号内是字符串,将会原样返回
`Hello ${'World'}`
// "Hello World"
(3)模板字符串可以嵌套
const tmpl = addrs => `
${addrs.map(addr => `
${addr.first}
${addr.last}
`).join('')}
`;