字符串 · Javascript基礎篇

[TOC] >[success] # 字符串 ~~~ 'Es6'新增了許多'字符串方法' ~~~ <br/> >[success] ## codePointAt() 方法 ~~~ 'ES6'新出的方法，可以獲取字符串的對應的'Unicode'碼，例如: ~~~ ~~~ var name = "小明" console.log(name.codePointAt(0)) // 23567 console.log(name.codePointAt(1)) // 26126 或者用 'charCodeAt'方法也行 console.log(name.charCodeAt(0)) // 23567 console.log(name.charCodeAt(1)) // 26126 ~~~ <br/> >[success] ## String.fromCodePoint() 方法 ~~~ 'String.fromCodePoint()'方法可以將用'codePointAt()'取到的'code'轉換為'字符串',例如： ~~~ ~~~ console.log(String.fromCodePoint(23567)) // 小 console.log(String.fromCharCode(26126)) // 明 ~~~ ~~~ 可以將 'String.fromCodePoint()' 視為 'String.fromCharCode()' 的完善版本。兩者處理 'BMP' 字符時會返回相同結果，只有處理 'BMP' 范圍之外的字符時才會有差異。 ~~~ <br/> >[success] ## normalize() 這個就不詳細寫了，轉載自CSDN: https://blog.csdn.net/qq_42469247/article/details/88802479 >[success] ## 識別子字符串的方法 ~~~ 在'ES6'沒出之前，判斷'字符串'中是否包含某個字符，都是使用某個值'indexOf'是否等于'-1'的形式來判斷的，不過'ES6'現在出了3個新的判斷字符串方法'includes()'、'startsWith()'、'endsWith()'，他們三個都有第二個參數 ~~~ ### includes()、startsWith()、endsWith() ~~~ 'includes()'和'indexOf()'的不同處是'includes()'返回一個'布爾值',這個值為'true'就證明字'符串中'存在你要找的項，反之不存在，但是'indexOf()'返回的是'數字型'如果這個值存在就返回這個值在字符串中的'索引值', 不存在就返回'-1'，'startsWith()'，'endsWith()'，他們三個都有'第二個參數','includes()'也可以用來判斷'數組'中的某個值是否等于某個值，返回結果'布爾值' ~~~ ~~~ var msg = "Hello.world!" console.log(msg.startsWith("Hello")) // true console.log(msg.endsWith("!")) // true console.log(msg.includes("o")) // true console.log(msg.startsWith("o")) // false console.log(msg.endsWith("world!")) // true console.log(msg.includes("x")) // false console.log(msg.startsWith("o", 4)) // true console.log(msg.endsWith("o", 8)) // true console.log(msg.includes("o", 8)) // false ~~~ ### repeat() 方法 ~~~ 可以'復制'一個字符串，如下： ~~~ <br/> ~~~ let str = '鳴子嘎' str.repeat(2) // 鳴子嘎鳴子嘎還有可以用來增加文本的縮進，下面的寫法就類似于打了'4'個空格，然后又用'indentLevel'復制了指定的個數 // indent 使用了一定數量的空格 var indent = " ".repeat(4), indentLevel = 0 // 每當你增加縮進 var newIndent = indent.repeat(++indentLevel) ~~~ <br/> >[success] ## 模板字面量（字符串模板） ~~~ let message = `hello world！` console.log(message) // 'hello world' console.log(typeof message) // 'string' console.log(message.length) // 12 想在字符串中包含'反引號'，只需使用'反斜杠（ \ ）'轉義即可,在模板字模板中無需對'雙引號'或'單引號'進行轉義 let message = `\`hello\` world!` console.log(message) // `hellow` world! console.log(typeof message) // string console.log(message.length) // 14 ~~~ <br/> >[success] ### 多行字符串 ~~~ 下面的例子，看著是換行了，其實沒有換行，因為'反斜線'被視為'續延符號'而不是'新行'的符號 ~~~ ~~~ var message = "Multiline \ string" console.log(message) // "Multiline string" ~~~ #### ES5的字符串換行方案 ~~~ var message = [ '呵呵噠', '奧利給' ].join('\n') console.log(message)???//?呵呵噠 // 奧利給或者這么寫： let message = "呵呵噠 \n" + "奧利給" console.log(message)???//?呵呵噠 // 奧利給 ~~~ #### ES6的字符串換行方案 ~~~ 這里需要注意的是'ES6'的'字符串模板'中會把所有的'空格'和'回車'都算在'length'中 ~~~ ~~~ let message = `呵呵噠奧利給` console.log(message) // 呵呵噠 // 奧利給 console.log(message.length) // 7 如果覺得這樣的換行'不雅觀'也可以使用'\n'來代替'回車'換行 let message = `Multiline\nstring`; console.log(message) // Multiline // string ~~~ ~~~ 下面的例子即使我在'div'標簽后面增加了很多'空格',也會被'trim'方法去掉，如果說不想要'字符串'的 '首尾空格'和'回車'可以這樣做： ~~~ ~~~ let html = ` <div> <h1>Title</h1> </div> `.trim() console.log(html.length) // 31 ~~~ <br/> >[success] ## 制造替換位（${}） ~~~ 'ES5'中如果想讓'變量'或者'方法'和'字符串'拼接在以前需要這樣寫： ~~~ ~~~ function test(){ return '456' } var a = '123' + test() + '789' console.log(a) // 123456789 ~~~ ~~~ 'ES6'中可以使用'${變量或方法}'來在'字符串模板'中直接使用 ~~~ ~~~ function test(){ return '456' } let a = `123${ test() }789` console.log(a) ~~~ <br/> >[success] ## 標簽化模板 ~~~ 像下面這么寫，靜態數據'123456'會被當做test方法的'literals參數數組'，并且數組的長度為'2'，因為 'message'變量里面寫了'${}'，所以會被一個空字符串占用一個長度，'substitutions'參數是一個數組，里面包含著'message'變量中所有'${}變量'的'數組集合' ~~~ ~~~ /** * 測試方法 * @param {array} literals - 靜態字符串數組 * @param {array} y - '${}'動態數據的數組 */ function test(literals,...substitutions){ console.log(literals,'靜態數據數組') // [123456, ''] console.log(literals.length) // length為2，因為寫${}會占用一個空字符串的長度 console.log(substitutions,'動態數據數組') // [789] console.log(substitutions.length) // 1 } let info = '789' let message = test`123456${ info }` ~~~ <br/> >[success] # 總結 <br/> | ES7字符串方法| ES6字符串方法 | ES5字符串方法 | 說明 | 類型 | 可選值 | 默認值 | 返回值 | | --- | --- | --- | --- | --- | --- | --- | --- | || codePointAt() | | 可以根據索引（index）獲取字符串的對應的Unicode碼 | function(index) | — | 0 | undefined / Unicode碼 | || | charCodeAt() | 可以根據索引（index）獲取字符串的對應的Unicode碼 | function(index) | — | 0 | NaN / Unicode碼 || String.fromCodePoint() | | Unicode碼轉換成字符串 | function(string/number) | — | — | string | || normalize() | | [歸一化函數](https://blog.csdn.net/Solomon1558/article/details/44689611) | — | — | — | — | | includes() | | | ES7的遍歷判斷方法，與indexOf的不同處返回布爾值不返回索引值，字符串和數組可用 |基本數據類型 | — | — | true / false | | startsWith() | | | 用來判斷字符串是否以另外一個給定的子字符串開頭 | — | — | true / false |—| | endsWith() | | | 用來判斷字符串是否以另外一個給定的子字符串結尾 | — | — | true / false |—| | repeat() | | | 可以復制字符串，參數為要復制個數, 復制個數不能為負數 | number | — | —| —|