ES6的字符串擴展和模板

ES6的字符串擴展和模板

---

方法	描述
includes(string,position)	判斷字符串中是否包含指定字符串，返回值是布爾值
startsWith(string,position)	判斷字符串的開頭是否包含指定字符串，返回值是布爾值
endsWith(string,position)	判斷字符串的尾部是否包含指定字符串，返回值是布爾值
repeat(n)	repeat()方法返回一個新字符串，表示將字符串重複n次

字符串補全	第一個參數是補全後的字符串長度，第二個參數是用於補全的字符串
padStart(length,str)	用於頭部補全
padEnd(length,str)	用於尾部補全

• 使用模板字符串時的注意事項

  • 在模板字符串中如需使用反引號，反引號前要用反斜槓轉義
  • 使用模板字符串表示多行字符串時，所有的空格和縮進都會被保留在輸出之中
  • 模板字符串中引入變量，要用${變量名}這樣的形式引入纔可以
  • 大括號中的值不是字符串時，將按照一般的規則轉爲字符串。比如，大括號中是一個對象，將默認調用對象的toString方法
  • 模板字符串中的${…}大括號內部可以放入任意的JavaScript表達式，可以進行運算，可以引用對象屬性，可以調用函數，可以嵌套，還能調用自己本身。

• 代碼

     <script>
         //es5
         {
             const str1 = 'a'
             const str2 = '\u20bb7'
             console.log(str2)
         }
         //es6
         {
             const str3 = 'u\{20bb7}'
             console.log('str3',str3)
         }
         //for of
         {
             const str3 = 'u\{20bb7}'
             for(let i = 0;i<str3.length;i++){
                 console.log('for',str3[i])
             }
             for(let word of str3){
                 console.log('for-of',word)
             }
         } 
         //判斷字符串是否包含指定字符串的幾個方法
         {
             let str = '11122Nick888'
             console.log('includes',str.includes('Nick')) //判斷是否包含Nick字符串
             console.log('startsWith',str.startsWith('Nick',3)) //判斷是否以Nick開頭，第二參數是要查找的位置
             console.log('endsWith',str.endsWith('Nick',7))//第二個參數代表數到7以前是否含有k
         }   
         {
             let str = '1Nick23'
             str = str.repeat(3) //將字符串重複3次
             console.log('repeat',str)
         }
         {
             let str = 'Apple'
             str = str.padStart(8,'asss')
             console.log('padStart',str)
         }
         {//模板字符串
             const name = 'nick'
             const age = 10
             const str = '我叫'+name+',我今年'+age+'歲'
             console.log('es5-str',str)
             const str2 = `我叫${name},我今年${age}了`//${}裏面不一定要是變量，他會保存回車和空格在輸出之中
             console.log('es6-str',str2)
         }
     </script>