js ES6-字符串模板字符串新增方法

模板字符串的基本用法：

模板语法：Esc键上的单引号: ` `

以前的写法：无法换行，需要使用字符串拼接  
    let html = "<html><head></head><body><p>asdkfuhia</p></body></html>"
    console.log(html)   
    输出结果：
    // <html><head></head><body><p>asdkfuhia</p></body></html>
  //没有一点格式。看起来很混乱

字符串模板写法：可以随意的换行，模板语法：Esc键上的单引号:``.
    let html = `<html>
                  <head>
                  </head>
                  <body>
                    <p>今天天气很好</p>
                  </body>
                </html>`

    console.log(html) 
    输出结果：
    //<html>
    //    <head>
    //    </head>
    //    <body>
    //        <p class="text">今天天气很好</p>
    //    </body>
    //</html>
    //模板语法可以保留html树形格式。

模板字符串传值：${ 变量 }

//模板语法传值：${ str }
    let className = "text";
    let str = "今天天气很好";
    let html = `<html>
                  <head>
                  </head>
                  <body>
                    <p class="${className}">${str}</p>
                  </body>
                </html>`

    console.log(html) 
    输出结果：
    //<html>
    //    <head>
    //    </head>
    //    <body>
    //        <p class="text">今天天气很好</p>
    //    </body>
    //</html>

ES6 (ES2016)字符串新增方法：

查找：str.includes( val )

查找 red
let str = "red blue yellow";

以前都是用 str.indexOf( val )  返回的是索引（位置）,没找到返回 -1
if(str.indexOf("red")!= -1){
    alert(true)
}else{
    alert(false)
}

ES2016新增 str.includes( val )    返回的是 true/false
alert(str.includes("red"))     // 弹出 true

以xx开头结尾：str.startsWith( val )、str.endsWith( val )

let str = "https://blog.csdn.net/qq_41772754/article/details/88086475";

判断是否是以“https” 开头，多用于及检测地址
str.startsWith("https")  // 返回true

判断是否是以“6475” 结尾，多用于判断文件的格式
str.endsWith("6475")  // 返回true

重复字符串：str.repeat( num )

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

字符串填充：str.padStart( num , val)、str.padEnd( num , val )

前面填充：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

js ES6-字符串模板 字符串新增方法

猜你喜欢

js ES6-字符串模板字符串新增方法