js中的字符串
字符串创建:
参数:
参数 s 是要存储在 String 对象中或转换成原始字符串的值。
返回值:
当 String() 和运算符 new 一起作为构造函数使用时,它返回一个新创建的 String 对象,存放的是字符串 s 或 s 的字符串表示。
当不用 new 运算符调用 String() 时,它只把 s 转换成原始的字符串,并返回转换后的值。
demo:
var str="hello,world"
console.log(str[0]);
console.log(str[5]);
console.log(str.length);
字符串遍历:
for(var i=0;i<str.length;i++){
console.log(str[i]);
}
字符串for-in遍历:
for(var i in str){
console.log(str[i]);
}
字符串常见方法:
ES6新增:
1. 字符串重复 -- repeat() 方法
作用: 返回一个新字符串,表示将原字符串重复n次。
var str = 'helloworld';
str.repeat( n );//该字符串就会重复n遍;
谷歌已经支持ES6的写法;可以在控制台的console里直接使用 'helloworld'.repeat( n );
如果repeat的参数是负数或者Infinity,会报错。
如果repeat的参数是字符串,则会先转换成数字。
2.字符串之 长度补全
padStart(),padEnd()
padStart()
用于头部补全,padEnd()
用于尾部补全。
'use strict'; // 'ababx' console.log('x'.padStart(5, 'ab')) // 'abax' console.log('x'.padStart(4, 'ab')) // 'xabab' console.log('x'.padEnd(5, 'ab')) // 'xaba' console.log('x'.padEnd(4, 'ab'))
上面代码中,padStart
和padEnd
一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。
如果原字符串的长度,等于或大于指定的最小长度,则返回原字符串。
'use strict'; // 'mfg' console.log('mfg'.padStart(2, 'ab')) // 'mfg' console.log('mfg'.padEnd(2, 'ab'))
padStart
的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。
'use strict'; // "0000000001" console.log('1'.padStart(10, '0')) // "0000000012" console.log('12'.padStart(10, '0')) // "0000123456" console.log('123456'.padStart(10, '0'))
另一个用途是提示字符串格式。
'use strict'; // "YYYY-MM-12" console.log('12'.padStart(10, 'YYYY-MM-DD')) // "YYYY-09-12" console.log('09-12'.padStart(10, 'YYYY-MM-DD') )
3.字符串 之 strim();
作用: 去除字符串两端的空格;
我们经常在开发的时候使用字符串变量。
比如说:
var user = ’ userName''
happy new year ! {{ user }} !
或者是
var name = "Bob ", time = "today";
`Hello ${name}, how are you ${time}?`
这时候我们就可以使用tirm() 的方法替换;
4.字符串 之 raw()方法。
作用:.raw方法,往往用来充当模板字符串的处理函数,返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,对应于替换变量后的模板字符串。
示例:
String.raw = function (strings, ...values) {
var output = "";
for (var index = 0; index < values.length; index++) {
output += strings.raw[index] + values[index];
}
output += strings.raw[index]
return output;
}
5.查找字符串
includes(), startsWith(), endsWith()
let str = 'abc'
str.includes('a') //是否包含,如果找到返回true,找不到返回false。也可以支持第二个参数,表示开始搜索的位置。
str.startsWith('a') //字符串开始位置是否包含,表示查找原字符串是否以给定的字符串开头,开始的位置,返回Boolean,成功返回true,否则返回false。也可以支持第二个参数,表示开始搜索的位置
str.endsWith('c') //字符串结束位置是否包含。表示查找原字符串是否以给定的字符串结尾,返回Boolean类型,成功返回true,否则返回false。支持第二个参数,表示搜索前n个字符。是指从第n + 1个位置搜索前n个字符。
6.获取字符编码
charCodeAt()
7.转字符串为字符
formCharCode()
ES6对Unicode的支持
在ES5中我们知道JavaScript 允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码点。这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符,必须用两个双字节的形式表示,但是ES5却无法正确的识别这个有两个字节组成的字符。ES6中,JavaScript增加了对超出\u0000~\uFFFFUnicode范围的字符支持。
ES6的解决方法:将这种超过两个字节的组成的单个字符的码点放在一对花括号里面就可以正确的识别
1.codePointAt(index)方法
JavaScript 内部,字符以 UTF-16 的格式储存,每个字符固定为2个字节。对于那些需要4个字节储存的字符(Unicode 码点大于0xFFFF的字符), JavaScript 会认为它们是两个字符。这里解释了为什么"𠮷"这个字符调用length属性的时候,返回的长度是2了
在ES5为我们提供的charCodeAt(index)方法只能分别返回"𠮷"前两个字节和后两个字节的值,而charAt(index)方法无法正常读取这个字符(出现了乱码)。ES6 提供了codePointAt(index)方法,能够正确处理 4 个字节储存的字符,返回一个字符的码点。
值得注意的是:
(1)codePointAt(index)方法识别大于两个Unicode节点编码的字符的时候,识别前两个字节的时候会直接将这个四个字节的字符的码值返回,识别后面的字节的码值和charCodeAt(index)返回的结果一致
(2)codePointAt方法会正确返回 32 位的 UTF-16 字符的码点。对于那些两个字节储存的常规字符,它的返回结果与charCodeAt方法相同(这就导致了下面所说的那种情况)。
(3)通过for......of 循环解决codePointAt(index)在传入正确的位置索引的时候,返回的结果有偏差的问题-----原理就是for .......of 循环可以正确的识别 32 位的 UTF-16 字符
2.String.fromCodePoint(numX,numX,...,numX)方法(numX为Unicode值)
ES5 提供String.fromCharCode(numX,numX,...,numX)方法,用于从码点返回对应字符,但是这个方法不能识别 32 位的 UTF-16 字符(Unicode 编号大于0xFFFF)
ES6 提供了String.fromCodePoint(numX,numX,...,numX)方法,可以识别大于0xFFFF的字符,弥补了String.fromCharCode方法的不足。在作用上,正好与codePointAt方法相反。
值得注意的是:
(1)String.fromCodePoint(numX,numX,...,numX),当传入多个Unicode值的时候,将会把结果合并成一个字符串返回
(2)String.fromCodePoint(numX,numX,...,numX)是定义在String对象上的方法。而codePointAt(index)是定义在字符串实例上的方法,这一点要去区分
demo:
字符串的解构赋值
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
这种解析方式,类似于数组的对象都有一个length属性,因此还可以对这个属性解构赋值。
解构赋值:
字符的解构:按照顺序一一对应,没有对应,为undefined
字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。如:
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值,如:
let {length : len} = 'hello';
len // 5