共计 8470 个字符,预计需要花费 22 分钟才能阅读完成。
前言
上一篇做了一下数组的总结,在总结的过程中重新巩固了对数组的方法的使用,很多以前没记住的细节也一一捡了起来,这一篇 Sring 笔记也是为了重新复习下 String 的相关定义和用法。
String
1 JavaScript 的原生对象 String 关于 String 作为原生对象和构造函数的区别,上一篇数组有过详细的解析。这里就直接开始分析这两种情况下的 String 的使用。
1-2 属性和方法使用
1-2-1 length 属性返回 String 对象的长度。
这里的 length 属性只是 String 本身的 length 属性,其值为 1。
1-2-2 name 属性返回 String 对象名称。
与 length 属性一样,其值为 ”String”。
1-2-3 fromCharCode() 方法返回使用指定的 Unicode 值序列创建的字符串。
参数 1:要转换的数据
String.fromCharCode(98,99,100);
// “bcd”
注意:作用于高位编码,返回简单的高位编码的字符串,例如阿拉伯数字等等。
1-2-4 fromCodePoint() 静态方法返回使用指定的代码点序列创建的字符串。
参数 1:要转换的数据
String.fromCodePoint(0x2F804);
// “ 你 ”
String.fromCharCode(0x2F804);
// “”
注意:String.fromCodePoint()是 ES6 的新方法,被用来返回一对低位编码,从而可以完全表示这些高位编码字符。
2 作为函数调用
2-1 规范
字符串可以通过 3 个方式创建,字面量方式,String 方法转化,以及 String 构造函数创建。
let str = “12”;
let str2 = String(“13”);
console.log(typeof(str));
console.log(typeof(str2));
str.__proto__ === String.prototype;
str2.__proto__ === String.prototype;
// string
// string
// true
// true
let str1 = new String(“12”);
console.log(typeof(str1));
str1.__proto__ === String.prototype;
// object
// true
1、字面量方式创建的字符串和 String 方法转化的都是基本字符串。这些基本字符串没有属性和方法。而通过 String 构造函数创建的实例对象都是字符串对象,它继承 String 原型的上的属性和方法。2、当基本字符串需要调用一个字符串对象才有的方法或者查询值的时候(基本字符串是没有这些方法的),JavaScript 会自动将基本字符串转化为字符串对象并且调用相应的方法或者执行查询。
2-2 参数
“value” 任何可以被转换成字符串的值。
2-3 实例方法
ES5 原有方法 String.prototype.
2-3-1 charAt()
方法从一个字符串中返回指定索引的字符。
1 个参数:
index 字符串的索引,取值为整数。(0 ~ length-1);1、传入非数字或者不传则默认取索引为 0 的字符。2、传入的数值大于取值范围(0 ~ length-1),返回空字符串。
let str = “123”;
console.log(str.charAt(0));
console.log(str.charAt(1));
console.log(str.charAt(2));
console.log(str.charAt());
console.log(str.charAt(“0”));
console.log(str.charAt(5));
// 打印结果
1
2
3
1
1
“”
2-3-2 concat()
方法将一个或多个字符串与原字符串连接合并,形成一个新的字符串并返回。
多个参数:
string1,string2… 和原字符串连接的多个字符串。1、返回新的字符串,不影响原来的字符串。
let str1 = “hello”;
let str2 = “world”;
let str3 = str1 + str2;
let str4 = str1.concat(str2);
console.log(str1);
console.log(str3);
console.log(str4);
let str5 = `${str1}:${str2}`
console.log(str5);
// 打印结果
“hello”
“helloworld”
“helloworld”
“hello:world”
1、性能上字符串拼接性能高于使用 concat 方法。2、ES6 的模板字符串拼接方便与其他未声明的字符串拼接。
2-3-3 indexOf()
方法返回调用 String 对象中第一次出现的指定值的索引,如果未找到该值,则返回 -1。
2 个参数:
string 指定查询的字符串。
index 表示调用该方法的字符串中开始查找的位置,取值为整数,默认值为 0。
分两种情况
查找的值是非空字符串
index < 0 与传入默认值 0 返回结果一致。
如果 index >= str.length,则该方法返回 -1。
查找的值是空字符串
index <= 0 时返回 0。
0 < index <= str.length 时返回 index 的值。
index > str.length 时返回 str.length。
let str = “this is a question”;
let findStr = “question”;
let emptyStr = “”;
console.log(str.indexOf(findStr));
console.log(str.indexOf(findStr, -1));
console.log(str.indexOf(findStr, 20));
console.log(str.indexOf(“answer”));
console.log(str.indexOf(emptyStr, -1));
console.log(str.indexOf(emptyStr, 15));
console.log(str.indexOf(emptyStr, 20));
// 打印结果
10
10
-1
-1
0
15
18
2-3-4 lastIndexOf()
方法返回指定值在调用该方法的字符串中最后出现的位置,如果没找到则返回 -1。从该字符串的后面向前查找,从 index 处开始。
string 指定查询的字符串。
index 表示调用该方法的字符串中开始查找的位置,取值为整数,默认值为 str.length。
分两种情况
查找的值是非空字符串
index < 0 则 index = 0。
如果 index > str.length,则 index = str.length。
查找的值是空字符串
index <= 0 时返回 0。
0 < index <= str.length 时返回 index 的值。
index > str.length 时返回 str.length。
let str = “this is a question”;
let findStr = “question”;
let emptyStr = “”;
console.log(str.lastIndexOf(findStr));
console.log(str.lastIndexOf(findStr, 20));
console.log(str.lastIndexOf(findStr, -1));
console.log(str.lastIndexOf(“answer”));
console.log(str.lastIndexOf(emptyStr, -1));
console.log(str.lastIndexOf(emptyStr, 15));
console.log(str.lastIndexOf(emptyStr, 20));
// 打印结果
10
10
-1
-1
0
15
18
2-3-5 slice()
方法提取一个字符串的一部分,并返回一新的字符串。提取的新字符串包括 beginIndex 但不包括 endIndex。
2 个参数:
beginIndex
开始提取字符串的索引位置,取值为整数。
如果为负数,则 beginIndex = str.length + beginIndex;
如果省略该参数,beginIndex = 0。
endIndex
结束提取字符串的索引位置,取值为整数。
如果 endIndex < 0,则 endIndex= str.length + endIndex;
如果 endIndex > str.length – 1,slice 会一直提取到字符串末尾。
如果省略该参数,slice 会一直提取到字符串末尾。
let str = “xiaohei like play basketball”;
console.log(str.slice());
console.log(str.slice(0, 50));
console.log(str.slice(-3));
console.log(str.slice(0, -9));
// 打印结果
“xiaohei like play basketball”
“xiaohei like play basketball”
“all”
“xiaohei like play b”
2-3-6 split()
方法使用指定的分隔符字符串将一个 String 对象分割成字符串数组,以将字符串分隔为子字符串,以确定每个拆分的位置。不改变原有字符串。
2 个参数:
separator
指定表示每个拆分应发生的点的字符串。
如果省略,会返回有含有整个字符串元素的数组;
如果分隔符为空字符串,则将 str 原字符串中每个字符的数组形式返回。
limitNumber
指定分割后返回数组的元素个数,取值为整数。
如果 limitNumber< 0,则返回全部被分割的元素组成的数组;
如果 limitNumber 大于当前被分割的元素个数,则返回全部被分割的元素组成的数组。
如果 limitNumber 小于当前被分割的元素个数,则返回 limitNumber 个数的元素组成的数组。
如果省略该参数,则返回全部被分割的元素组成的数组。
let str = “asd,12,2,321,21”
console.log(str.split(“,”, 0));
console.log(str.split(“,”, -1));
console.log(str.split(“,”));
console.log(str.split(“,”, 3));
console.log(str.split(“,”, 6));
let str1 = “today is sunday”;
console.log(str1.split());
console.log(str1.split(“”));
// 打印结果
[]
[“asd”, “12”, “2”, “321”, “21”]
[“asd”, “12”, “2”, “321”, “21”]
[“asd”, “12”, “2”]
[“asd”, “12”, “2”, “321”, “21”]
[“today is sunday”]
[“t”, “o”, “d”, “a”, “y”, ” “, “i”, “s”, ” “, “s”, “u”, “n”, “d”, “a”, “y”]
2-3-7 substring()
方法返回一个字符串在开始索引到结束索引之间字符串。不改变原有字符串。
2 个参数:
startIndex
截取字符串开始的索引,为一个整数。
startIndex = endIndex,返回一个空字符串。
startIndex > endIndex 则 startIndex = endIndex 而 endIndex = startIndex。
startIndex < 0 或者 startIndex = NaN, 则 startIndex = 0。
startIndex > str.length – 1 则 startIndex = str.length – 1。
endIndex
截取字符串结束的索引,为一个整数。
endIndex < 0 或者 endIndex= NaN, 则 endIndex= 0。
endIndex > str.length – 1 则 endIndex= str.length – 1。
let str = “qwertydf”;
console.log(str.substring());
console.log(str.substring(1, 1));
console.log(str.substring(-1, 3));
console.log(str.substring(-1, 20));
console.log(str.substring(6, 0));
// 打印结果
“qwertydf”
“”
“qwe”
“qwertydf”
“qwerty”
2-3-8 toUpperCase(),toLocaleUpperCase()
toUpperCase()
将调用该方法的字符串值转换为大写形式,并返回。
toLocaleUpperCase()
使用本地化(locale-specific)的大小写映射规则将输入的字符串转化成大写形式并返回结果字符串。
两个方法绝大多数情况下返回结果一致,对于一些特殊的语言会返回不同,(日常使用中没啥区别)。都不会改变原来字符串。
let str = “helloworld, HI”;
str.toLocaleUpperCase(); // HELLOWORLD, HI
str.toUpperCase(); // HELLOWORLD, HI
2-3-9 toLowerCase(),toLocaleLowerCase()
toLowerCase()
将调用该方法的字符串值转换为小写形式,并返回。
toLocaleLowerCase()
使用本地化(locale-specific)的大小写映射规则将输入的字符串转化成小写形式并返回结果字符串。
两个方法绝大多数情况下返回结果一致,对于一些特殊的语言会返回不同,(日常使用中没啥区别)。都不会改变原来字符串。
let str = “helloworld, HI”;
str.toLocaleLowerCase(); // helloworld, hi
str.toLowerCase(); // helloworld, hi
2-3-10 valueOf(),toString()
valueOf()
字符串或者字符串对象调用该方法返回的该字符串的基本字符串格式。
toString()
与 valueOf 使用方法一致。
上文中提到了字符串的两个基本格式,基本字符串和字符串对象,而基本字符串在使用实例方法时,javascript 会把它转化成字符串对象后再调用方法。所以无论是基本字符串还是字符串对象调用这两个方法,本质上是没有区别的。valueOf() 方法通常在 JavaScript 内部被调用,而不是在代码里显示调用。
let baseStr = “baseString”;
let objStr = new String(“objectString”);
console.log(baseStr.toString());
console.log(objStr);
console.log(objStr.valueOf());
// 打印结果
“baseString”
String {0: “o”, 1: “b”, 2: “j”, 3: “e”, 4: “c”, 5: “t”, 6: “S”, 7: “t”, 8: “r”, 9: “i”, 10: “n”, 11: “g”}
“objectString”
2-3-11 trim()
方法会从一个字符串的两端删除空白字符。方法并不影响原字符串本身。
let str = ” test “;
console.log(str.trim()); // test
console.log(str); // ” test ”
ES6 新增方法 String.prototype.
2-3-12 includes()
方法用于判断一个字符串是否包含在另一个字符串中,根据情况返回 true 或 false。
2 个参数:
string 指定查询的字符串。
index
开始查询的位置,取值为整数。
取值不正确或不填默认从 0 开始。
let str = “hello world”;
let str1 = “world”;
console.log(str.includes(str, 0));
console.log(str.includes(str1, 6));
console.log(str.includes(str1, 20));
console.log(str.includes(str1, “ads”));
// 打印结果
true
true
false
true
2-3-13 startWith()
方法用来判断当前字符串是否是以另外一个给定的子字符串“开头”的,根据判断结果返回 true 或 false。
2 个参数:
string 指定查询的字符串。
index
开始查询的位置,取值为整数。
取值不正确或不填默认从 0 开始。
let str = “object is not found”;
console.log(str.startsWith(“object”, 1));
console.log(str.startsWith(“object”));
console.log(str.startsWith(“object”, “sadas”));
// 打印结果
false
true
true
2-3-13 endWith()
方法用来判断当前字符串是否是以另外一个给定的子字符串“结尾”的,根据判断结果返回 true 或 false。
2 个参数:
string 指定查询的字符串。
index
开始查询的位置,取值为整数。
取值不正确或者不填默认字符串末尾是否已要查找的字符串结尾。
如果传值正确,则表示从 str.length – index 处往前的字符串是否以要查找的字符串结尾。
let str = “object,String”;
console.log(str.endsWith(“object”)); // false
console.log(str.endsWith(“String”)); // true
// 从 str.length – index 往前的字符串
// 从 7 索引位置开始前面的字符串是否包含 object
console.log(str.endsWith(“object”, 6)); // true
// 从 6 索引位置开始前面的字符串是否包含 object
console.log(str.endsWith(“object”, 7)); // false
2-3-13 padStart(),padEnd()
方法用来在字符串头部 / 尾部补全不够指定长度的字符串,返回新的字符串,不改变原来字符串。
2 个参数:
length
补全字符串的长度,取值为整数。
如果原字符串长度大于补全长度,则返回原字符串。
string
用来补全的字符串。
如果不填则以空字符串补全。
如果补全的字符串长度与原字符串长度相加大于了补全长度参数,则会截取大于补全长度的多余的补全字符串。
let str = “1”;
console.log(str.padStart(3));
console.log(str.padEnd(3));
console.log(str.padStart(3, “2”));
console.log(str.padEnd(3, “2”));
let str1 = “abcdefg”;
console.log(str1.padStart(10, “hijklm”));
console.log(str1.padEnd(10, “hijklm”));
let str2 = “09-12”
console.log(str2.padStart(10, “YYYY-MM-DD”));
let str3 = “abc”;
console.log(str3.padStart(2));
console.log(str3.padEnd(2, “2222”));
// 打印结果
” 1″
“1 ”
“221”
“122”
“hijabcdefg”
“abcdefghij”
“YYYY-09-12”
“abc”
“abc”
2-3-13 repeat()
方法用来把原字符串重复 n 次,返回新字符串。
2 个参数:
number
指定重复的次数,取值为整数。
取值为 0 表示重复 0 次,返回空字符串。
取值为 NaN 或者 (-1,0] 则 number = 0。
字符串转化成数字。
小于等于负一的数或者无限数都会报错。
小数直接取整。
let str = “a”;
console.log(str.repeat(0));
console.log(str.repeat(2));
console.log(str.repeat(2.9));
console.log(str.repeat(“asd”));
console.log(str.repeat(-0.9));
console.log(str.repeat(“2”));
console.log(str.repeat(-1));
console.log(str.repeat(Infinity));
// 打印结果
“”
“aa”
“aa”
“”
“”
“aaa”
“Uncaught RangeError: Invalid count value”
“Uncaught RangeError: Invalid count value”
由于正则这块忘得差不多了,所以 String 与正则相关的方法会在后续完成正则的复习后再加上