您现在的位置是：网站首页> 编程资料编程资料

JavaScript 引用类型之原始值包装类型String_javascript技巧_

2023-05-24 263人已围观

简介 JavaScript 引用类型之原始值包装类型String_javascript技巧_

String 原始值包装类型

String是对应字符串的引用类型。要创建一个String 对象，使用String 构造函数并传入一个数值。

let stringObject = new String("hello world");

String 对象的方法可以在所有字符串原始值上调用。3个继承的方法valueOf，toLocalString()和String()都返回对象的原始字符串值。 每个String对象都有一个length属性，表示字符串中字符的数量。

let stringValue = "hello world"; console.log(stringValue.length);// "11"

String 类型提供了很多方法来解析和操作字符串。比如字符串截取函数，slice(),substr(),substring(),字符串连接函数concat(),查询字符串位置相关函数， indexOf()，lastIndexOf(),字符串大小写转换函数toLowerCase(),toLocalLowerCase(),toUpperCase(),toLocalUpperCase()等等，本文将对几乎所有的字符串方法进行总结梳理，以便后用。

String 原始值包装类型 操作方法

1.字符串编码常规化函数 normalize()方法

某些Unicode 字符可以有很多种编码方式。有的字符可以通过一个BMP字符表示，也可以通过一个代理对表示。

//U+00C5 上面带圆圈的大写拉丁字母A console.log(String.fromCharCode(0x00C5)); //Å //U+212B：长度单位 “埃” console.log(String.fromCharCode(0x212B));// Å //U+004 大写拉丁字母A //U+030A： 上面加个圆圈 console.log(String.fromCharCode(0x0041,0x030A)); // Å

比较操作符不在于字符开起来是什么样的，因此着三个字符互不相等。

let a1 = String.fromCharCode(0x00C5), a2 = String.fromCharCode(0x212B), a3 = String.fromCharCode(0x0041,0x030A); console.log(a1,a2,a3); // Å,Å,Å console.log(a1 === a2);//false console.log(a2 === a3);//false console.log(a1 === a3);//false

为解决这个问题，Unicode 提供了4种规范化形式， 可以将上面的字符规范化为一致的格式，无论底层字符的代码是什么。这4种规范化形式是：NFD,NFC,NFKD和NFKC。可以使用normalize()方法对字符串应用上述规范化形式，使用时需要穿入表示哪种形式的字符串："NFD","NFC","NFKD","NFKC";

通过比较字符串与其调用normalize()的返回值，就可以知道该字符串是否已经规范化了：

let a1 = String.fromCharCode(0x00C5), a2 = String.fromCharCode(0x212B), a3 = String.fromCharCode(0x0041,0x030A); // U+00C5 是对0+212B 进行NFC/NFKC 规范化之后的结果 console.log(a1 === a1.normalize("NFD")); // false console.log(a1 === a1.normalize("NFC"));//true console.log(a1 === a1.normalize("NFKD"));// false console.log(a1 === a1.normalize("NFKC"));//true //U+212B 是未规范化的 console.log(a2 === a2.normalize("NFD")); // false console.log(a2 === a2.normalize("NFC"));//false console.log(a2 === a2.normalize("NFKD"));// false console.log(a2 === a2.normalize("NFKC"));//false //U+0041/U+030A 是对0+212B 进行NFD/NFKD 规范化之后的结果 console.log(a3 === a3.normalize("NFD")); // true console.log(a3 === a3.normalize("NFC"));//false console.log(a3 === a3.normalize("NFKD"));// true console.log(a3 === a3.normalize("NFKC"));//false

选择同一种规范化形式可以让比较操作符返回正确的结果：

let a1 = String.fromCharCode(0x00C5), a2 = String.fromCharCode(0x212B), a3 = String.fromCharCode(0x0041,0x030A); console.log(a1.normalize("NFD") === a1.normalize("NFD")); // false console.log(a2.normalize("NFKC") === a2.normalize("NFKC"));//false console.log(a3.normalize("NFC") === a3.normalize("NFC"));// false

2.字符串拼接函数concat()

concat()用于将一个或多个字符串拼接成一个新字符串。

let stringValue = "hello"; let result = stringValue.concat("world"); console.log(result);// hello world console.log(stringValue);// hello

stringValue 调用concat()方法返回的结果是得到"hello world" ,但stringValue 的值保持不变。
concat()方法可以接受任意多个参数，因此可以一次性拼接多个字符串

let stringValue = "hello "; let result = stringValue.concat("world","!"); console.log(result);// "hello world!" console.log(stringValue); // "hello "

3.字符串提取子字符串方法：slice(),substr(),substring()

slice(),substr(),substring() 这三个方法都返回它们的字符串的一个子字符串，而且都接收一个或两个参数。

第一个参数表示子字符串开始的位置，第二个参数表示子字符串结束的位置。

对slice()和substring()而言，第二个参数是提取结束的位置(即该位置之前的字符会被提取出来)。

对substr()而言，第二个参数表示返回的子字符串的字符数量。

任何位情况下，省略第二个参数都意味着提取到字符串末尾。

与concat()方法一样，slice(),substr()和substring()也不会修改调用它们的字符串。

let stringValue = "hello world"; // 传递一个参数，相当于提取到字符串末尾 console.log(stringValue.slice(3)); //"lo world" console.log(stringValue.substr(3)); //"lo world" console.log(stringValue.substring(3); //"lo world" // 传递2个参数，slice(),substring()结果一致，substr() 结果与前两者有区别 console.log(stringValue.slice(3,7)); //"lo w" console.log(stringValue.substr(3,7)); //"lo w" console.log(stringValue.substring(3,7); //"lo worl"

当传递给slice(),substring(),substr的参数为负数时，这三个函数的行为有所不同。 slice()方法将所有负数参数都当成字符串长度加上参数值。

substring()方法将所有负参数值都转换为0.

substr()方法将第一个负参数值当成字符串长度加上该值，将第二个负参数值转换为0.

let stringValue = "hello world"; console.log(stringValue.slice(-3));// "rld" console.log(stringValue.substring(-3));//"hello world" console.log(stringValue.subst(-3));//"rld" console.log(stringValue.slice(3,-4));// "lo w" 转化为 （3，-4 + 11） = （3，7） console.log(stringValue.substring(3，-4));//"hel"，转化为（3，0），这个函数会将较小的参数作为起点，较大的参数作为终点，所以相当于（0，3） console.log(stringValue.substr(3,-4));//"" 转化为(3,0)

4.字符串位置方法 indexOf(),lastIndexOf()

有两个方法用于在字符串中定位子字符串，indexOf()和lastIndexOf().这两个方法在字符串中搜索传入的字符串，并返回位置(如果没找到，则返回-1.).

两者的区别在于，indexOf()从字符串开头开始查找子子字符串，而lastIndexOf()方法从公字符串末尾开始查找子字符串。

let stringValue = "hello world"; console.log(stringValue.indexOf("o");//4 console.log(stringValue.lastIndexOf("o"));// 7

这两个方法都可以接收第二个参数，表示开始搜索的位置。这意味着，indexOf()会从这个参数指定的位置开始向字符串末尾搜索，忽略位置之前的字符；lastIndexOf()则会从这个参数指定的位置开始向字符串开头开始搜索，忽略该位置之后直到字符串末尾的字符。

需要注意的是，返回值的位置永远是搜索的子字符串在搜索字符串中的正序位置，不会因为第二个参数而改变。并且传入的搜索的范围包含第二个参数传递的位置。

let stringValue = "hello world"; console.log(stringValue.indexOf("o",7));// 7 console.log(stringValue.lastIndexOf("o",7));//7

5.字符串包含方法：startsWith(),endsWith()和includes()

ECMAScript 6 增加了3个用于判断字符串是否包含另一个字符串的方法：startsWith(),endsWith()和includes().这些方法都会从字符串中搜素传入的字符串，并返回一个是否包含的布尔值。
区别在于，startsWith()检查开始于索引0的匹配项，endsWith()检查开始于索引(string.length - substring.length())的匹配项，而includes()检查整个字符串。

let message = "foobarbaz"; console.log(message.startsWith("foo"));//true console.log(message.endsWith("bar"));//false console.log(message.endsWith("baz"));//true console.log(message.startsWith("bar"));//false console.log(message.includes("foo"));//true console.log(message.includes("qux"));//false

startsWith()和incluedes()方法接收可选的第二个参数，表示开始搜索的位置。如果传入第二个参数，则意味着这两个方法会从指定位置向着字符串末尾搜索，忽略位置之前的所有字符。

let message = "foobarbaz"; console.log(message.startsWith("foo"));//true console.log(message.startsWith("foo",1));//false console.log(message.includes("bar"));//true console.log(message.includes("bar",4));//false

endsWith()方法接收可选的第二个参数，表示把传入的第二个参数作为字符串结尾的位置。如果不提供这个参数，那么默认就是字符串长度。如果提供了这个参数，那么就好像字符串直邮那么差多字符一样。

let message = "foobarbaz"; console.log(message.endsWith("bar"));//false console.log(message.endsWith("bar",6));//true

6.去除字符串前后空格的方法 trim(),trimLeft(),trimRight()

ECMAScript 在所有字符串上提供了trim()方法。这个方法会创建字符串的一个副本，删除前后的所有空格，在返回结果。 trimLeft()和trimRight()方法分别从字符串开始和末尾清理空格符。

let stringValue = " hello world "; let trimmedStringValue = stringValue.trim(); console.log(stringValue); // " hello world " console.log(trimmedStringValue);//"hello world" console.log(stringValue.trimLeft());//"hello world " console.log(stringValue,trimRight());//" hello world"

7.字符串的重复复制 repeat()

ECMAScript 在所有字符串上都提供了repeat()方法。这个方法接收一个整数参数，表示要将字符串复制多少次，然后返回拼接所有副本后的结果。

let stringValue = "na "; console.log(stringValue.repeat(3) + "batman"); // na na na batman

8.字符串填充函数 padStart() 和 padEnd()方法

padStart() 方法和padEnd()方法会复制字符串，如果小于指定长度，则在相应一边填充字符，直至满足长度条件。这两个方法的第一个参数是长度，第二个参数是可选的填充字符串，默认为空字符串(U+0020).

let stringValue = "foo"; console.log(stringValue.padStart(6)); // " foo" console.log(stringValue.pa
                
                

                

                                            
上一篇：vue项目打包发布后接口报405错误的解决_vue.js_

                                                                
下一篇：JavaScript常用数组去重的方法及对比详解_javascript技巧_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网