es6(字符串的扩展)

includes()、startsWith()、endsWith()

是否包含字符串

  • includes() :返回布尔值,表示是否找到了参数字符串
  • startsWith() :返回布尔值,表示参数字符串是否在原字符串的头部
  • endsWith() :返回布尔值,表示参数字符串是否在原字符串的尾部
let s = 'Hello world!';

s.includes('o')
s.startsWith('Hello')
s.endsWith('!')

结果输入:true  true  true

支持第二个参数,表示开始搜索的位置

let s = 'Hello world!';

s.includes('Hello', 6)
s.startsWith('world', 6)
s.endsWith('Hello', 5)

结果输入:false  true  true

解释说明: endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。


repeat()

repeat方法返回一个新字符串,表示将原字符串重复n次

'x'.repeat(3)
'hello'.repeat(2)
'na'.repeat(0) 

结果输入:"xxx"   "hellohello"   ""
  • 参数为小数:取整
  • 参数为负数或infinity:报错
  • 参数为0到-1之间:取0
  • 参数NaN:取0
  • 参数为字符串:转换为数字,若转换不了,取0

padStart(),padEnd()

padStart() 用于头部补全
padEnd()  用于尾部补全

'x'.padStart(5, 'ab')
'x'.padStart(4, 'ab')

'x'.padEnd(5, 'ab')
'x'.padEnd(4, 'ab') 

结果输入:ababx   abax   xabab   xaba

padStart()和padEnd()一共接受两个参数

  • 第一个参数是字符串补全生效的最大长度
  • 第二个参数是用来补全的字符串

注意点:

  • 如果原字符串的长度,等于或大于最大长度,则字符串补全不生效,返回原字符串
  • 如果用来补全的字符串与原字符串,两者的长度之和超过了最大长度,则会截去超出位数的补全字符串
  • 如果省略第二个参数,默认使用空格补全长度

padStart()用途

  • 为数值补全指定位数
  • 提示字符串格式
'12'.padStart(10, 'YYYY-MM-DD')
'09-12'.padStart(10, 'YYYY-MM-DD')

结果输入:YYYY-MM-12    YYYY-09-12

matchAll()

返回一个正则表达式在当前字符串的所有匹配


模板字符串

es5的写法:

$('#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!
`);

模板字符串是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。(所有的空格和缩进都会被保留在输出之中)
若不想要换行,可以使用trim方法消除

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

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

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

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
  • 大括号内部可以放入任意的 JavaScript 表达式,可以进行运算,以及引用对象属性
  • 模板字符串之中还能调用函数
  • 如果模板字符串中的变量没有声明,将报错。
  • 如果大括号内部是一个字符串,将会原样输出。
  • 模板字符串甚至还能嵌套

嵌套

const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;

const data = [
    { first: '<Jane>', last: 'Bond' },
    { first: 'Lars', last: '<Croft>' },
];

console.log(tmpl(data));

结果输入:
<table>

   <tr><td><Jane></td></tr>
   <tr><td>Bond</td></tr>

   <tr><td>Lars</td></tr>
   <tr><td><Croft></td></tr>

</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!"
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值