ES6之字符串模板与字符串新增

最新推荐文章于 2023-01-07 03:01:00 发布

欠踹的背影007

最新推荐文章于 2023-01-07 03:01:00 发布

阅读量146

点赞数

分类专栏： ES6

本文链接：https://blog.youkuaiyun.com/qq_33396780/article/details/103480429

版权

ES6 专栏收录该内容

4 篇文章

订阅专栏

一、格式

``

提示：在英文状态下，点击键盘数字1左侧按键出来的符号。

二、可以随意换行

let html = "<html><head></head><body><p>asdkfuhia</p></body></html>";
console.log(html);	//<html><head></head><body><p>asdkfuhia</p></body></html>

let html = `<html>
                  <head>
                  </head>
                  <body>
                    <p>今天天气很好</p>
                  </body>
                </html>`
console.log(html);
//<html>
//    <head>
//    </head>
//    <body>
//        <p class="text">今天天气很好</p>
//    </body>
//</html>

三、模板字符串传值

格式：${}

let name = '张三';
let age = 18;
let str = `这个人叫${name},年龄是${age}岁`;
console.log(str);	//这个人叫张三,年龄是18岁

四、字符串新增方法

1. 字符串查找

str.indexOf(要找的东西); //返回索引(位置)，没找到返回-1
str.includes(要找的东西); //返回值 true/false

查找 red
let str = "red blue yellow";
 
以前都是用 str.indexOf( val )  返回的是索引（位置）,没找到返回 -1
if(str.indexOf("red")!= -1){
    alert(true)
}else{
    alert(false)
}
 
str.includes( val )    //返回的是 true/false，ES2016新增
alert(str.includes("red"))     // 弹出 true

2. 字符串以谁开头结尾

str.startsWith(检测的东西); //返回值 true/false
str.endsWith(检测的东西); //返回值 true/false


let str = "https://blog.youkuaiyun.com/qq_41772754/article/details/88086475";
 
判断是否是以“https” 开头，多用于及检测地址
str.startsWith("https")  // 返回true
 
判断是否是以“6475” 结尾，多用于判断文件的格式
str.endsWith("6475")  // 返回true

3. 重复字符串

str.repeat(重复的次数);

let str = "abc"
let str2 = str.repeat(3); // 重复3次
console.log(str2)   // abcabcabc

4. 填充字符串

str.padStart(长度, 填充的字符串); //往前填充
str.padEnd(长度, 填充的字符串); //往后填充

前面填充：str.padStart( num , val) 
后面填充：str.padEnd( num , val )
    num:表示填充完后整个字符串的长度(原字符串的长度+要填充的字符串的长度)
    val:表示要填充的字符串
 
let str = "123456789";
let str2 = "abc"
str.padStart( str.length + str2.length, val)  //  abc123456789
--------------------------
str.padEnd( str.length + str2.length, val )   //  123456789abc