ES6-字符串新增特性

1.模板字符串

（1）定义比较长，复杂的字符串，如html代码

模板字符串中写 ` 需要转义，例子：

<script>
let html=`
         <div>\`//若需要在里面加反引号，则需要进行转义，只需  \`
               <p>你好</p>
               <a href="#">跳转链接</a>
          </div>
     `;// ``反引号
console.log(html);
</script>

（2）模板字符串中插入变量${变量名}：

<script>
//定义变量
let username='小丽';
let html = `
           <div>
                  <p>${username}</p>
           </div>`
//输出<div>
                   <p>小丽</p>
           </div>
</script>

（3）模板字符串中插入函数的调用${函数名()}

<script>
function fn(){
      return "hello world";
}
let html =  `
     <div>
           <p>${fn()}</p>
     </div>
`//输出<div>
           <p>hello world</p>
     </div>
<script>

2.字符串重复方法repeat()

把字符串重复输出，repeat()中加参数，例子：

<script>
let str = "hello world";
console.log(str.repeat(3));//第一种
console.log('hi'.repeat(10));//第二种
</script>

3.字符串补全长度方法padStart()/padEnd()

（1）padStart()给字符串前面添加字符；

例子：

<script>
let str = "hellow";
console.log(str.padStart(5));//自动子字符串钱补充5个空格，输出     hellow
console.log(str.padStart(5,"abc"))；//输出：
(  abchellow)
console.log(str.padStart(5,"*"))；//输出：
(*****hellow)
</script>

（2）padEnd()给字符串后面添加内容；

例子：

<script>
let str = "hellow";
console.log(str.padEnd(5));//自动子字符串钱补充5个空格，输出（hellow     ）
console.log(str.padEnd(5,"abc"))；//输出：
(hellowabc  )
console.log(str.padEnd(5,"*"))；//输出：
hellow(*****)
</script>

4.includes() / startsWith() / endWith()字符串包含验证，返回true和false

(1) includes()查询字符串里是否包含**，例：

<script>
let str = "hello World";
console.log(str.includes('a'));//查询str中是否包含“a”,输出true
conlose.log(str.includes('ow'));//查询str中是否包含“ow”,输出true
</script>

(2) startsWith()查询字符串是否是以***开头，例：

<script>
let str = "hello World";
console.log(str.startWith('hello'));//查询str中是否以'hello'开头,输出true
conlose.log(str.startWith('h'));//查询str中是否以'h'开头,输出true
</script>

(3) endWith()查询字符串是否是以***结尾，例：

<script>
let str = "hello World";
console.log(str.endWith('world'));//查询str中是否以'world'结尾,输出true
conlose.log(str.endWith('d'));//查询str中是否以'd'结尾,输出true
</script>

ES6-字符串新增特性

猜你喜欢