es6常用语法字符串扩展

s6新增三种api方法补充indexOf方法

includes():返回布尔值，表示是否找到了参数字符串。
startsWith():返回布尔值，表示参数字符串是否在源字符串的头部。
endsWith():返回布尔值，表示参数字符串是否在源字符串的尾部。

var s = 'hello world!';
s.startsWith('hello')//true
s.endsWith('!')//true
s.includes('0')//true

这三个方法都支持第二个参数，表示开始搜索位置。

s.startsWith('world',6)//true
s.endsWith('hello',5)//true
s.includes('hello',6)//false

repeat()方法

'x'.repeat(3);//xxx
//参数如果是小数，会被取整
'na'.repeat(2.9)//'nana'
//如果repeat的参数是负数或者infinity，会报错
//但是，如果参数是0到-1之间的小数，则等同于0，这是因为会先进行取整运算。
0到-1之间的小数，取整以后等于-0，repeat视同为0。
'na'.repeat(-0.9) // ""
//参数NaN等同于0。
//如果repeat的参数是字符串，则会先转换成数字。
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

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'

如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串。

'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。

'abc'.padStart(10, '0123456789')
// '0123456abc'

如果省略第二个参数，默认使用空格补全长度。

'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

padStart的常见用途是为数值补全指定位数。下面代码生成10位的数值字符串。

'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"

另一个用途是提示字符串格式。

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

模板字符串

传统的JavaScript语言，输出模板通常是这样写的

$('#result').append(
  'There are ' + basket.count + ' ' +
  'items in your basket, ' +
  '' + basket.onSale +
  ' are on sale!'
);

上面这种写法相当繁琐不方便，ES6引入了模板字符串解决这个问题。

$('#result').append(`
  There are ${basket.count} items
   in your basket, ${basket.onSale}
  are on sale!
`);

模板字符串（template string）是增强版的字符串，用反引号（）标识**``。
它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

上面代码中的模板字符串，都是用反引号表示。
如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。

var greeting = `\`Yo\` World!`;

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

$('#list').html(`

  first
  second

`);

上面代码中，所有模板字符串的空格和换行，都是被保留的，
比如

$('#list').html(`

  first
  second

`.trim());

模板字符串中嵌入变量，需要将变量名写在${}之中。

 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}.`);
   }
 }

大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。

  var x = 1;
  var y = 2;

  `${x} + ${y} = ${x + y}`
  // "1 + 2 = 3"

  `${x} + ${y * 2} = ${x + y * 2}`
  // "1 + 4 = 5"

  var obj = {x: 1, y: 2};
  `${obj.x + obj.y}`
  // 3

模板字符串之中还能调用函数。

  function fn() {
    return "Hello World";
  }

  `foo ${fn()} bar`
  // foo Hello World bar

如果大括号中的值不是字符串，将按照一般的规则转为字符串。
比如，大括号中是一个对象，将默认调用对象的toString方法。
如果模板字符串中的变量没有声明，将报错。

// 变量place没有声明
var msg = `Hello, ${place}`;
// 报错

由于模板字符串的大括号内部，
就是执行JavaScript代码，因此如果大括号内部是一个字符串，将会原样输出。

`Hello ${'World'}`
// "Hello World"

模板字符串甚至还能嵌套。

const tmpl = addrs => `
  
  ${addrs.map(addr => `
    
  `).join('')}
  ${addr.first}
    ${addr.last}
`;

上面代码中，模板字符串的变量之中，又嵌入了另一个模板字符串，使用方法如下。

const data = [
    { first: '', last: 'Bond' },
    { first: 'Lars', last: '' },
];

console.log(tmpl(data));
// 
//
//   
//   
//
//   
//   
//
// 
Bond
Lars

如果需要引用模板字符串本身，在需要时执行，可以像下面这样写。

  // 写法一
  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!"

es6常用语法字符串扩展

s6新增三种api方法补充indexOf方法

repeat()方法

padStart(),padEnd()方法

模板字符串

你可能感兴趣的:(es6常用语法字符串扩展)