JavaScript 基础（二）：String
基础系列文章：
JavaScript 基础（一）：null 和 undefined
一、string、String 区别
一般在使用的时候有以下这几种方法：
const str1 = '2dadsvge' const str2 = String('2dadsvge') const str3 = new String('2dadsvge')
其返回的结果有一定的差异，使用 typeof，=== 对比下
console.log(typeof str1,typeof str2,typeof str3) // string,string,object console.log(str1 === str2) // true console.log(str1 === str3) // false
可以看出：单独调用 String 返回的也是一个字符串；当 String 和 new 一块使用，返回的是一个字符串对象。
那么其本质的区别是：
string：原始值
String：原始值包装类型，具有引用类型的特点，同时也具有对应原始类型的特殊行为。
string 本身是不具有方法的。但是我们为什么可以直接 . 出方法呢？
其实是编译器在后台做了工作，已经把 string 包装成了 String 对象：
let str1 = 'some text' let str2 = str1.substring(2) // 等同于下面的三步 let str1 = new String('some text') // 创建一个 String 类型的实例 let str2 = str1.substring(2) // 调用实例上的方法 str1 = null // 销毁实例
这样就可以让原始值 string 拥有 String 对象的行为。
二、一些基本方法使用
1、toString
返回字符串本身。和直接输出一样。
2、charAt
返回字符串中指定索引位置的字符，索引从 0 开始。
const str = '2dadsvge' console.log(str.charAt(4)) // s
3、charCodeAt
返回字符串中指定索引位置字符的 Unicode 值，索引从 0 开始。
const str = '2dadsvge' console.log(str.charCodeAt(4)) // 115(s)
4、codePointAt
在 js 中字符是以 UTF-16 格式存储，每个字符固定2个字节。对于那些需要4个字节存储的字符（Unicode 码点 大于 0xFFFF 的字符），js 会认为是两个字符。
如：吉、𠮷 两个字存储的字符就不一样
const str13 = '吉' console.log(str13.codePointAt(0)) // 21513 console.log(str13.codePointAt(1)) // undefined const str14 = '𠮷' console.log(str14.codePointAt(0)) // 134071 console.log(str14.codePointAt(1)) // 57271
从上面可以看出，“吉”：一个字符，“𠮷”：两个字符。
因为 codePointAt 返回的是十进制的，可以转换为16进制。
也可以用 codePointAt 判断一个字符是否是四个字节组成：
function is32Bit(c) { return c.codePointAt(0) > 0xFFFF; } console.log(is32Bit("𠮷")) // true console.log(is32Bit("a")) // false
5、字符串中是否存在给定字符
在这里把：indexOf、lastIndexOf、match、search、includes、startsWith、endsWith 这些放在一起进行比较。
其中：indexOf、lastIndexOf、search 返回的是索引的位置，不存在返回 -1
includes、startsWith、endsWith 返回 true 或 false
match 存在，返回数组，否则返回 null
const str15 = 'dnzojonmjonns' console.log(str15.indexOf('jon')) // 4 console.log(str15.indexOf('rfbd')) // -1 console.log(str15.lastIndexOf('jon')) // 8 console.log(str15.lastIndexOf('rfbd')) // -1 console.log(str15.includes('jon')) // true console.log(str15.includes('rfbd')) // false console.log(str15.match('jon')) // [ 'jon', index: 4, input: 'dnzojonmjonns', groups: undefined ] console.log(str15.match('rfbd')) // null console.log(str15.search('jon')) // 4 console.log(str15.search('rfbd')) // -1 console.log(str15.startsWith('dnzo')) // true console.log(str15.startsWith('rfbd')) // false console.log(str15.endsWith('mns')) // false console.log(str15.endsWith('rfbd')) // false
针对这些判定，可以根据需求选择。
6、截取字符串
字符串的截取功能有：slice、substring、substr(IE 下)、replace
slice 示例：
// slice 返回字符串的子集，原字符串不变 const str16 = 'mzodennwe557scv' console.log(str16.slice()) // 未指定开始和结尾，返回原字符串 console.log(str16.slice(3)) // 未指定结尾，一直到原字符串结尾 console.log(str16.slice(3,7)) // 指定开始结尾，但不包括结尾 console.log(str16.slice(3,27))// 结尾索引超出字符串长度，到字符串结尾 console.log(str16.slice(7,3)) // start > end ,返回 '' console.log(str16.slice(-3,27)) // start > 0 ,start + length 这个新值继续重复上面操作
substring 示例：
// substring ,原字符串不变 const str16 = 'mzodennwe557scv' console.log(str16.substring()) // 未指定开始和结尾，返回原字符串 console.log(str16.substring(3)) // 未指定结尾，一直到原字符串结尾 console.log(str16.substring(3,7)) // 指定开始结尾，但不包括结尾 console.log(str16.substring(3,27))// 结尾索引超出字符串长度，到字符串结尾 console.log(str16.substring(7,3)) // start > end ,start 和 end 交换 console.log(str16.substring(-5,3)) // start end 中有一个小于0，当0处理
replace 示例：
// replace，原字符串不变，返回替换后的字符串 let str16_1 = 'segebrnhtn' let str_re = str16_1.replace('brn','') console.log(str16_1,str_re) // segebrnhtn segehtn
7、split
split 用于分隔字符串。具体用法如下：
/** * 用法： * str.split(separator,limit) * separator：分隔字符，也可以是正则表达式。当不传时，直接返回全部字符 * limit：限制风格字符后 array 的长度，超过该值结束分隔。不传就全部分隔 */ // limit 传值 var myString = "Hello World. How are you doing?"; var splits = myString.split(" ", 3); console.log(splits); // 正则表达式 var myString = "Hello 1 word. Sentence number 2."; var splits = myString.split(/(\d)/); console.log(splits); // 使用数值作为分隔符 const myString = 'ca,bc,a,bca,bca,bc'; const splits = myString.split(['a','b']); // myString.split(['a','b']) 相当于 myString.split(String(['a','b']))，所以是下面的结果 console.log(splits); //["c", "c,", "c", "c", "c"] // split 翻转字符串 const str = 'asdfghjkl'; const strReverse = str.split('').reverse().join(''); // 'lkjhgfdsa'
8、trim
trim 是删除空格和行终止符。
在 ES5 中只有 trim：删除前后空格和行终止符。
在 ES2019 中新增了：trimStart、trimEnd、trimLeft、trimRight。
trimStart 和 trimLeft 功能一样。
trimEnd 和 trimRight 功能一样。
const str17 = ` imnoi oasdmoib9 l ` console.log(str17.trim()) // 前后空格、行终止符都删除 console.log(str17.trimStart()) // 删除字符串头空格终止符 console.log(str17.trimLeft()) // 删除字符串头空格终止符 console.log(str17.trimEnd()) // 删除字符串尾空格终止符 console.log(str17.trimRight()) // 删除字符串尾空格终止符
9、填充字符串（pad）
这个填充的功能是在 ES2017 里面新增的。
有两个：padStart、padEnd。
/** * 用法： * padStart(targetLength,[padString]) * targetLength：字符串目标长度，即补全后的长度，如果小于当前长度，返回当前字符串 * padString：补全字符串，不传填充空格 */ const str1 = '2dadsvge' console.log(str1.padEnd(10)) // 将字符串 “123456” 转换为 “##3456” const mask = (str, maskStr = '##') =>{ if (!str || str.length<=4) return return str.slice(-4).padStart(str.length,maskStr) } console.log(mask('123456')) // ##3456
上面是给出了 padStart 的示例，padEnd 参数用法一样，只是填充的是后面。
10、repeat
字符串重复指定的份数。
/** * 用法： * repeat(count) * count：重复的份数，不传或为0，返回'' */ const str18 = 'sdf' console.log(str18.repeat()) // '' console.log(str18.repeat(0)) // '' console.log(str18.repeat(3)) // sdfsdfsdf
12、concat
字符拼接，可以拼接一个或多个字符串。
/** * 用法： * concat(string|string[]) * string:要拼接到后面的字符串，不传返回原字符串 * 当有字符串数组，会用“,”拼接后再添加 */ const str19 = 'srndf' console.log(str19.concat('rrrrr')) // srndfrrrrr console.log(str19.concat('rrrrr','ppppp')) // srndfrrrrrppppp console.log(str19.concat(['cccc','ddddd'])) // srndfcccc,ddddd console.log(str19.concat(['cccc','ddddd'],'kkk')) // srndfcccc,dddddkkk
12、返回 HTML Element
ES6 新增了一些方法，直接把字符串转换为 HTML Element。
有这些（举例部分）：big、blink、bold、fixed、fontcolor、fontsize 等
/** * 用法： * big() * 转换为 big 标签 * fontsize(size) * size：number，转换后的标签字体大小 */ const str20 = '字符转标签' console.log(str20.big()) // <big>字符转标签</big> console.log(str20.fontsize(16)) // <font size="16">字符转标签</font>
13、模板字符串
模板字符串：表面上看，就是用 `` （反引号）包围的字符串，
可以看做普通字符串，也可以定义多行字符串，
还可以在字符串中嵌入变量。
/** * 用法： * `` 标识 * 包含 ` 的，需要转义：`\`Yo\` World!` * 多行字符串：所有的空格、缩进都会保留并输出 * 嵌套：${} * 嵌套的可以是变量，也可以是函数等，结果值不是 string 的会转换为 string */ const s = '嵌套变量' function getAge() { return 30 } const str21 = `zheg 上面有换行，会输出： ${s}, 年龄：${getAge()}` console.log(str21) // 输出 zheg 上面有换行，会输出： 嵌套变量, 年龄：30
