字符串的扩展

1.新增方法来确定一个字符串是否包含在另一个字符串中

传统的方法  indexOf

a.includes()返回布尔值,表示是否找到来参数字符串

b.startsWith()返回布尔值,表示参数字符串是否在原字符串头部

c.endsWith()返回布尔值,表示参数字符串是否在原字符串尾部

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

let s ='hello world'

s.includes('hello',6) //false  从第n个字符到结束

s.startsWith('hello',0) //true  从第n个字符到结束

s.endsWith('world',11) //true  针对前n个字符

2.repeat()方法返回一个新字符串,表示将原来的字符串重复n次,如果小数,会被取整 如果是小于-1负数,会报错,大于-1到0之间取整返回空,nan也返回空,如果是数字字符串,会先转成数字,如果是文字字符串返回空

'x'.repeat(3) //'xxx'  'hello'.repeat(1) //'hellohello'  'a'.repeat(0) //'' 

3.字符串补全长度功能  头部补全 padStart()    尾部补全 padEnd()

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

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

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

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

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

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

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

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

4. padStart 常见用途  数值补全指定位数,👇代码生成10位的数字字符串

'1'/padStart(10,'0')  //'0000000001'

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

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

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

5.模版字符串 用反引号(`)标识 

`in javascript `\n`is a line-feed.`

多行 所有的空格和缩进都会被保留在输出之中 想要去除使用trim 方法  `in javascript this is

not legal.`

$('#box').html(`

  <ul>

    <li>first</li>

    <li>one</li>

    <li>tow</li>

  </ul>

`.trim());

嵌入变量

let name ='zhanglu'

`my name is ${name}`

在模版字符串中需要使用反引号,则需要反斜杆转义  let get =`\`you\` world!`

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

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

如果模版字符串中的变量没有声明,将报错

如果大括号内部就是哥字符串,将会原样输出

6.标签模版

alert `1`  alert(1)  一样的

如果模版字符里面有变量,就不是简单的调用了,而是会将模版字符串先处理成多个参数,再调用函数

let a =5;let b=10;

tag`hello ${a+b} world ${a*b}`;  等同于  tag(['hello','world',''],15,50)

7.标签模版的一个重要应用,就是过滤html字符串,防止用户输入恶意内容

 

posted @ 2018-03-14 11:39  不积硅步无以至千里  阅读(1154)  评论(0编辑  收藏  举报