ES6学习历程(字符串的扩展)

字符串的扩展

　　在看这一节的时候前半部分写的都是关于unicode的内容,我个人感觉这部分在实际的开发中用的很少,所以不打算在做记录,等届时用到再有针对性的看,所以就将在ES6里面关于字符串操作的一些新的方法举一些例子看下;

　　一、操作方法:

　　　　1.传统上关于字符串的查找只有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  代表从index为6一直到字符串结束的部分;
s.endsWith('Hello', 5) // true  代表从开始到index为5的部分;
s.includes('Hello', 6) // false  代表从index为6一直到字符串结束的部分;

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

　

'hello'.repeat(2);结果:'hellohello';
'hello'.repeat(0);结果:' ';传入0;意味重复0次;
'hello'.repeat(2.9);结果:'hellohello';会被向下取整;
'hello'.repeat(Infinity)或者'hello'.repeat(负数);结果报错;
'hello'.repeat(a) -1<a<0 // "此时a会被当做0处理";
'hello'.repeat(NaN);结果:' ';当做0处理;
'hello'.repeat('3');传入字符串的时候会先将字符串转化为数字;

　　　　3.padStart()头部补全，padEnd()尾部补全;

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

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

以上两个方法均接收两个参数,第一个参数将原始字符串用第二个字符串补全长度至第一个参数;
如果第二个参数省略,那将会用空格补全;

　　　　4.模板字符串

原先jquery写法:
    $(div).append('你的好友<b>'+username+'</b>向你发送了<span>'+money+'</span>元的红包');
模板字符串写法:
    $(div).append(`你的好友<b>${username}</b>向你发送了<span>${money}</span>元红包`);
在模板字符串内可以解析变量;
// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
如果在一个字符串中需要使用` 这个字符的话,需要用\进行转译;console.log(\`我\`);结果:   `我`;
另外模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

此外模板字符串还可以调用函数;
function fn() {
  return "嘟嘟嘟";
}

`foo ${fn()} bar` // foo Hello 嘟嘟嘟 bar
如果{a};a没有被定义将会报错;如果a是对象将会先将a执行toString();
模板字符串还可以嵌套使用:
const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;