包装类对象 向右看齐 2023-02-20 04:58 140阅读 0赞 **字符串、布尔值、数字都是可以调用方法的,尤其是字符串,有很多的方法可以调用,那么他们的原理是什么呢?** ### **1、字符串的原型上的方法** ### var str = new String(); 空字符串实例 ** 字符串的方法都不会改变原字符串。**该实例的原型上的方法有: ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70][] **(1)charAt方法:返回指定位置的字符** 请注意,JavaScript 并没有一种有别于字符串类型的字符数据类型,所以返回的字符是长度为 1 的字符串。 var str = "abcde"; console.log(str.charAt(0),str); a abcde ** charCodeAt() 方法:返回指定位置的字符的 Unicode 编码** var str = "abcde"; console.log(str.charCodeAt(0),str); 97 "abcde" **(2) 转大小写** **toLowerCase() 方法和toLocaleLowerCase() 方法:**用于把字符串转换为小写。所有大写字符全部被转换为小写字符 与 toLowerCase() 不同的是,toLocaleLowerCase() 方法按照本地方式把字符串转换为小写。只有几种语言(如土耳其语)具有地方特有的大小写映射,所有该方法的返回值通常与 toLowerCase() 一样。 var str = "abcDeaBabA"; console.log(str.toLocaleLowerCase()); abcdeababa ** toUpperCase()方法 和 toLocaleUpperCase()方法,将字符串的每个字符转换为大写。** **(3)去空字符** trim()方法:用于删除字符串的头尾空格。 **(4)split() 方法:返回一个按参数拆分字符串后的数组** **不传值:将字符串作为一个整项,作为数组的第一个项。** **传空字符串:把字符串每一项拆开。** **传指定字符:按指定字符拆开。** var str = "abcdefabab"; console.log(str.split()); ["abcdefabab"] console.log(str.split("")); ["a", "b", "c", "d", "e", "f", "a", "b", "a", "b"] console.log(str.split("a"));["", "bcdef", "b", "b"] **concat() 方法:用于连接两个或多个字符串,返回拼接后的新字符串。** var str = "abcde"; console.log(str.concat("mn","xyz")); abcdemnxyz **slice(start, end) 方法:**可提取字符串的某个部分,并以新的字符串返回被提取的部分。 使用 start(包含) 和 end(不包含) 参数来指定字符串提取的部分。 字符串中第一个字符位置为 0, 第二个字符位置为 1, 以此类推。 **提示:** 如果是负数,则该参数规定的是从字符串的尾部开始算起的位置。也就是说,-1 指字符串的最后一个字符,-2 指倒数第二个字符,以此类推。 var str = "abcdefabab"; console.log(str.slice(0,3)); abc **substring() 方法:用于提取字符串中介于两个指定下标之间的字符** var str = "abcdeababa"; console.log(str.substring(0,3)); abc **(5)** **indexOf方法**:字符串原型上也有这个方法,所以字符串也可以用这个方法来查找字符是否存在。同样还有**lastIndexOf方法。** **(6)localeCompare() 方法:用本地特定的顺序来比较两个字符串。结合数组sort方法可以排序。** 提供的比较字符串的方法,考虑了默认的本地排序规则。ECMAscript 标准并没有规定如何进行本地特定的比较操作,它只规定该函数采用底层操作系统提供的排序规则。 console.log("a".localeCompare("b")); -1 升序 console.log("b".localeCompare("a")); 1 降序 给数组中的每一项排序,按本地规则排序。如果是数字,按数字大小排序,如果是字符串,按本地规则的字符串排序。 var arr = ["我","你","他",12,3,5,14,"abc","b","ac"]; arr.sort((a,b) => { return typeof a === "number" && typeof b === "number" ? a - b : (a+"").localeCompare(b+""); }) console.log(arr); [3, 5, 12, 14, "你", "他", "我", "abc", "ac", "b"] **(7)与正则表达式相关的方法** **match() 方法:**可在字符串内检索指定的值,或找到一个或多个**正则表达式的匹配**。 该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。 var str = "abcdeababa"; var reg = /a/g; console.log(str.match(reg)) ["a", "a", "a", "a"] match() 方法将检索字符串,以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。如果 regexp 没有标志 g,那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本, match() 将返回 null。否则,它将返回一个数组,其中存放了与它找到的匹配文本有关的信息。 **匹配不到返回null :** var str = "abcdefabab"; var reg = /\d/g console.log(str.match(reg)); null 全局匹配和非全局匹配的结果是不同的。 全局匹配:返回所以匹配到的组成的数组。 var str = "abcdefabab"; var reg = /b/g; console.log(str.match(reg)); ["b", "b", "b"] 非全局匹配:返回匹配项信息组成的数组。 var str = "abcdefabab"; var reg = /b/; console.log(str.match(reg)); ["b", index: 1, input: "abcdefabab", groups: undefined] **replace() 方法**:用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。不修改原字符串。 字符串替换字符串:只能匹配到第一个字符,然后将其替换: var str = "abcdefabab"; console.log(str.replace("a","1"),str); 1bcdefabab abcdefabab 正则表达式非全局匹配: var str = "abcdefabab"; var reg = /a/; console.log(str.replace(reg,"1")); 1bcdefabab 正则表达式全局匹配字符: var str = "abcdefabab"; var reg = /a/g; console.log(str.replace(reg,"1")); 1bcdef1b1b 正则的子表达式:第二个参数中$1 $2 $n将代表对应的子表达式 var str = "a1bcdefa2ba3b"; var reg = /(a)(\d)/g; console.log(str.replace(reg,"$2$1")); 1abcdef2ab3ab 正则与 正则表达式相匹配的文本:$& var str = "a1bcdefa2ba3b"; var reg = /(a)(\d)/g; console.log(str.replace(reg,"$&$&")); a1a1bcdefa2a2ba3a3b 正则表达式匹配内容左侧的文本:$\` 下例中第一个a的左侧文本替换a,第二个a的左侧文本替换a var str = "12a34a56"; var reg = /a/g; console.log(str.replace(reg,"$`")); 12123412a3456 正则表达式匹配子串右侧的内容:$' 第二个参数是函数: var str = "12a34a56"; var reg = /(a)(\d)/g; console.log(str.replace(reg,function(){ console.log(arguments); return "b"; })); 匹配到几次,函数就执行几次。每次打印的arguments如下: 该处理函数接收的实参包括: param1:匹配到的文本, param2子表达式1,param3子表达式2,。。 **子表达式是从第二个参数开始的** 倒数第二个:是匹配到的文本的位置, 倒数第一个:字符串本身。 ![20200624100507301.png][] ![20200624100521242.png][] **search() 方法:**用于检索字符串中**指定的子字符串**,**或检索与正则表达式相匹配的子字符串**。 返回检索到的第一个符合的位置,如果没有找到任何匹配的子串,则返回 -1。 var str = "12a34a56"; var reg = /(a)(\d)/g; console.log(str.search(reg)); 2 **(8)还有一些方法可以修改样式,参考以下图片** ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 1][] ### 2、布尔值的原型上的方法 ### var flag = new Boolean(); 值为false的布尔类型 ![20200623152426525.png][] 我们知道**布尔类型也重写了toString方法** var flag = true; console.log(flag.toString(), typeof flag.toString()); true string console.log(flag, typeof flag); true "boolean" ### 3、数字的原型上的方法 ### var num = new Number(); 值为0的数字类型 ![2020062315250735.png][] **Number原型上的这三个方法,都是返回字符串 ,且不改变原数字。** ** (1)toString方法**:返回字符串类型,不改变数字原本的类型。 var num1 = 123456; console.log(num1.toString()); 字符串123456 console.log(typeof num1.toString()); 类型string console.log(typeof num1); 类型number **(2)toFixed方法**:保留几位小数且会进行四舍五入,返回值是四舍五入后的结果,不改变原本的数字。不够时用0代替。 注意参数 在: 0 ~ 20 之间的值,包括 0 和 20 var num1 = 1.23456; console.log(num1.toFixed(3),typeof num1.toFixed(3)); 1.235 string console.log(num1); 数字1.23456 小数部分不够时,用0代替。 var num1 = 123456; console.log(num1.toFixed(3)); 123456.000 **(3)toExponential方法**:转为科学计数法,参数为保留的小数个数,会进行四舍五入。 var num1 = 123456; console.log(num1.toExponential(3),typeof num1.toExponential(3)); 1.235e+5 string console.log(num1); 数字123456 再比如:科学计数法保留七位小数: var num1 = 123456; console.log(num1.toExponential(7),typeof num1.toExponential(7)); 1.2345600e+5 string [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200623151626180.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw,size_16,color_FFFFFF,t_70 [20200624100507301.png]: https://img-blog.csdnimg.cn/20200624100507301.png [20200624100521242.png]: https://img-blog.csdnimg.cn/20200624100521242.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200623164657674.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw,size_16,color_FFFFFF,t_70 [20200623152426525.png]: https://img-blog.csdnimg.cn/20200623152426525.png [2020062315250735.png]: https://img-blog.csdnimg.cn/2020062315250735.png
还没有评论,来说两句吧...