ES6学习—字符串的扩展(2018-06-23)

字符串常用方法总结

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 => `
    
  `).join('')}
  
${addr.first}
${addr.last}
`;

你可能感兴趣的:(ES6学习—字符串的扩展(2018-06-23))