基础系列文章:
JavaScript 基础(一):null 和 undefined
JavaScript 基础(二):String
JavaScript 基础(三):Number
JavaScript 基础(四):Array
JavaScript 基础(五):Object
JavaScript 基础(六):Map、Set
一、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