🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[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 | — | —| —|