手记

JavaScript包装对象之字符串

包装对象

我们知道,基本类型值不是对象,因而从逻辑上讲它们不应该有方法。但是为了便于操作基本类型值,JavaScript提供了3个特殊的引用类型:Boolean、Number和String。说其特殊,是因为每当读取一个基本类型值的时候,后台就会创建一个对应的包装对象,从而让我们能够调用一些方法来操作这些数据。

例子:

console.log("love".slice(1));
//输出:ove

对象与包装对象的主要区别就是生存期。后台自动创建的包装对象,只存在于一行代码的执行瞬间,然后立即被销毁。因此我们不能为包装对象添加属性和方法。

例子:

var str = "love";
str.name = "me";
console.log(str.name);
//输出:undefined

*我们也可以显式地调用 String 构造函数来创建字符串对象(Boolean 和Number 也可以),但基本用不到。

例子:

var str = new String("love");
console.log(str);
//输出:love

字符串的属性

length 属性

字符串的每个实例都有一个length属性,表示字符串中包含多少个字符。

例子:

console.log("love".length); //输出:4
console.log("妈妈".length); //输出:2
console.log("m e".length); //输出:3

字符串的方法

访问单个字符的方法

charAt()和charCodeAt() 方法

charAt()方法接受一个参数,即基于0的字符位置,返回给定位置的那个字符。charCodeAt() 方法返回字符编码。

例子:

console.log("love".charAt(1));
//输出:o

访问个别字符更为常用的是使用方括号加数字索引的方式。

例子:

console.log("love" [1]);
//输出:o

取得字符位置的方法

indexOf()和lastIndexOf() 方法

这两个方法都是从一个字符串中搜索给定的子字符串,然后返回子字符串的位置(如果没有找到该子字符串,则返回-1)。这两个方法的区别在于:indexOf()方法从字符串的开头向后搜索子字符串,而lastInddexOf()方法是从字符串的末尾向前搜索子字符串。这两个方法都可以接收可选的第二个参数,表示从字符串中的哪个位置开始搜索。

例子:

console.log("love".indexOf("o")); //输出:1
console.log("love".indexOf("a")); //输出:-1
console.log("love".indexOf("o", 2)); //输出:-1

includes() 方法

这个方法接受两个参数,第一个参数指定要搜索的文本;第二个参数指定开始搜索的位置的索引值。如果在字符串中检测到指定的文本则返回true。

例子:

console.log("love me".includes("me")); //输出:true
console.log("love me".includes(" ")); //输出:true
console.log("love me".includes("o", 2)); //输出:false

startsWith()和 endsWith() 方法

这两个方法都接受两个参数,一个参数指定要搜索的文本;第二个参数指定开始搜索的位置的索引值。其中,startsWith() 方法会从字符串起始位置开始匹配,如果检测到指定文本则返回true。endsWith() 方法从字符串末尾位置开始匹配,如果检测到指定文本则返回true。如果指定了第二个参数,则startsWith() 方法会从这个索引值的位置开始匹配。endsWith() 方法从字符串长度减去这个索引值的位置开始匹配。

例子:

console.log("love me!".startsWith("love")); //输出:true
console.log("love me!".endsWith("!")); //输出:true
console.log("love me!".startsWith("o", 2)); //输出:false
console.log("love me!".endsWith("o", 2)); //输出:true

复制子字符并创建新字符串的方法

concat() 方法

concat() 方法用于将一个或多个字符串拼接起来,返回拼接得到的新字符串。

例子:

console.log("love ".concat("me", "!"));
//输出:love me!

拼接字符串使用更多的是加号操作符(+)。

例子:

console.log("love " + "me" + "!");
//输出:love me!

substring() 方法

这个方法会返回被操作字符串的一个子字符串,接受的两个参数分别指定子字符串的开始位置和结束位置(不包括结束位置的字符)。如果没有传递第二个参数,则将字符串的长度作为结束位置。当传入的参数是负值时,substring()方法会把所有负值参数都转换为0。

例子:

console.log("love me".substring(0)); //输出:love me
console.log("love me".substring(0, 4)); //输出:love
console.log("love me".substring(-1)); //输出:love me

substr() 方法

这个方法会返回被操作字符串的一个子字符串,接受的两个参数分别指定子字符串的开始位置和返回的字符个数。如果没有传递第二个参数,则将字符串的长度作为结束位置。当传入的参数是负值时,substr()方法将负的第一个参数加上字符串的长度,而将负的第二个参数转换为0。

例子:

console.log("love me".substr(0)); //输出:love me
console.log("love me".substr(0, 1)); //输出:l
console.log("love me".substr(-1)); //输出:e

slice() 方法

这个方法会返回被操作字符串的一个子字符串,接受的两个参数分别指定子字符串的开始位置和结束位置(不包括结束位置的字符)。如果没有传递第二个参数,则将字符串的长度作为结束位置。当传入的参数是负值时,slice()方法会将传入的负值与字符串的长度相加。

例子:

console.log("love me".slice(0)); //输出:love me
console.log("love me".slice(0, 4)); //输出:love
console.log("love me".slice(-2)); //输出:me

repeat() 方法

这个方法接受一个number类型的参数,表示该字符串的重复次数,返回当前字符串重复一定次数后的新字符串。

例子:

console.log("0".repeat(2).concat("7"));
//输出:007

操作字符串前后内容的方法

trim()方法

这个方法删除字符串前后的所有空格,返回没有前后空格的新字符串。

例子:

console.log(" love ".trim());
//输出:love

padStart()和padEnd() 方法

这两个方法用于字符串的补全功能,一共接受两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符串。如果省略第二个参数,默认使用空格补全长度。其中,padStart()用于头部补全,padEnd()用于尾部补全。返回补全之后的新字符串。

例子:

console.log("7".padStart(3, "0")); //输出:007
console.log("7".padEnd(3, "0")); //输出:700

字符串大小写转换方法

toLowerCase()和toUpperCase() 方法

例子:

console.log("LOVE".toLowerCase()); //输出:love
console.log("love".toUpperCase()); //输出:LOVE

字符串转为数组的方法

split() 方法

这个方法用于把一个字符串分割成数组并返回该数组,接受两个参数,第一个参数可以是字符串或正则表达式,表示从该参数指定的地方分割;第二个参数用于指定数组的最大长度。

例子:

console.log("love".split()); //输出:["love"]
console.log("love".split("")); //输出:["l", "o", "v", "e"]
console.log("lo,ve".split(",")); //输出:["lo", "ve"]
console.log("l,o,v,e".split(",", 2)); //输出:["l", "o"]

字符串用于正则匹配的方法

match() 方法

这个方法只接受一个正则表达式作为参数,可在字符串内检索匹配的文本并返回一个数组。这个方法的行为在很大程度上依赖于正则表达式是否具有标志 g。如果正则表达式没有标志 g,那么 match() 方法就只会在字符串中执行一次匹配。

例子:

var str = "A;B;C;"
var m = str.match(/.;/g);
console.log(m);
//输出:["A;", "B;", "C;"]

replace() 方法

这个方法用于在字符串中用一些字符替换另一些字符。接受两个参数:第一个参数可以是一个正则表达式或者一个字符串,表示检索文本,第二个参数可以是一个字符串或者一个函数,表示替换文本。如果第一个参数是字符串,那么只会替换第一个子字符串。要想替换所有子字符串,唯一的办法就是提供一个正则表达式,而且要指定全局(g)。该方法返回替换后新创建的字符串。

例子:

var str = "a_1;a_1;a_1";
var new_str_1 = str.replace(1, 2);
var new_str_2 = str.replace(/1/g, 2);
console.log(new_str_1); //输出:a_2;a_1;a_1
console.log(new_str_2); //输出:a_2;a_2;a_2

ES6的模板字符串

模板字符串是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

基本用法

1、用反引号替换单、双引号。

例子:

let str = `love`;
console.log(str);
//输出:love

在模板字符串中不需要转义单、双引号。但如果想在字符串中使用反引号,则要用反斜杠(\)进行转义。

例子:

let str1 = `I am a "fool"`;
let str2 = `I am a \`fool\``;
console.log(str1); //输出:I am a "fool"
console.log(str2); //输出:I am a `fool`

2、ES6之前,创建多行字符串我们通常会在字符串中手动加入换行符(\n):

例子:

var str = ["A", "B", "C"].join("\n");
console.log(str);
//输出:A B C (多行显示)

但在ES6的模板字符串中,如果需要在字符串中添加新的一行,只需在代码中直接换行:

例子:

let str = `A
B
C`;
console.log(str);
//输出: A B C (多行显示)

*在反引号中的所有空白符都属于字符串的一部分,所以要小心缩进。

3、在模板字符串中,可以把任何合法的JavaScript 表达式嵌入到 ${} 占位符之中。

例子:

变量和表达式

let n1 = 1,
    n2 = 2;
let str = `${n1}+${n2}=${n1+n2}`;
console.log(str);
//输出:1+2=3

函数

let fn = () => "love";
let str = `${fn()} me`;
console.log(str);
//输出:love me

模板字符串本身也是JavaScript 表达式,因此也可以在模板字符串里面嵌入另一个。

例子:

let name = "Tom";
let str = `hello,${`my name is ${name}.`}`;
console.log(str);
//输出:hello,my name is Tom.

Boolean、Number


包装对象的两外两个 :Boolean和 Number ,由于实际应用比较少,所以在此不再叙述

7人推荐
随时随地看视频
慕课网APP