一、介绍
这节课呢,我们来了解的是JavaScript String数据类型。
我们在数据类型中已经简单的介绍了String数据类型,下面我们来详细的了解一下String类型。
JavaScript 字符串用于存储和处理文本。
二、知识点介绍
1、JavaScript字符串
2、创建string对象方式
3、String访问及查找方式
4、字符方法
三、上课对应视频的说明文档
1、JavaScript 字符串
字符串可以存储一系列字符,如 "John Doe"。
字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号:
实例
var carname = "Volvo XC60";
var carname = 'Volvo XC60';
你可以使用索引位置来访问字符串中的每个字符:
实例
var character = carname[7];
字符串的索引从 0 开始,这意味着第一个字符索引值为 [0],第二个为 [1], 以此类推。
你可以在字符串中使用引号,字符串中的引号不要与字符串的引号相同:
实例
var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';
你也可以在字符串添加转义字符来使用引号:
实例
var x = 'It\'s alright';
var y = "He is called \"Johnny\"";
1.1、字符串长度
可以使用内置属性 length 来计算字符串的长度:
实例
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
1.2、特殊字符
在 JavaScript 中,字符串写在单引号或双引号中。
因为这样,以下实例 JavaScript 无法解析:
"We are the so-called "Vikings" from the north."
字符串 "We are the so-called " 被截断。
如何解决以上的问题呢?可以使用反斜杠 (\) 来转义 "Vikings" 字符串中的双引号,如下:
"We are the so-called \"Vikings\" from the north."
反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符:
转义字符 (\) 可以用于转义撇号,换行,引号,等其他特殊字符。
下表中列举了在字符串中可以使用转义字符转义的特殊字符:
1.3、字符串可以是对象
通常, JavaScript 字符串是原始值,可以使用字符创建: var firstName = "John"
但我们也可以使用 new 关键字将字符串定义为一个对象: var firstName = new String("John")
实例
var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object
不要创建 String 对象。它会拖慢执行速度,并可能产生其他副作用:
实例
var x = "John";
var y = new String("John");
(x === y) // 结果为 false,因为 x 是字符串,y 是对象
=== 为绝对相等,即数据类型与值都必须相等。
字符串属性和方法
原始值字符串,如 "John", 没有属性和方法(因为他们不是对象)。
原始值可以使用 JavaScript 的属性和方法,因为 JavaScript 在执行方法和属性
时可以把原始值当作对象。
字符串方法我们将在下一章节中介绍。
1.4、字符串属性
属性 描述
constructor 返回创建字符串属性的函数
length 返回字符串的长度
prototype 允许您向对象添加属性和方法
方法 描述
charAt() 返回指定索引位置的字符
charCodeAt() 返回指定索引位置字符的 Unicode 值
concat() 连接两个或多个字符串,返回连接后的字符串
fromCharCode() 将 Unicode 转换为字符串
indexOf() 返回字符串中检索指定字符第一次出现的位置
lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置
localeCompare() 用本地特定的顺序来比较两个字符串
match() 找到一个或多个正则表达式的匹配
replace() 替换与正则表达式匹配的子串
search() 检索与正则表达式相匹配的值
slice() 提取字符串的片断,并在新的字符串中返回被提取的部分
split() 把字符串分割为子字符串数组
substr() 从起始索引号提取字符串中指定数目的字符
substring() 提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLowerCase() 把字符串转换为小写
toString() 返回字符串对象值
toUpperCase() 把字符串转换为大写
trim() 移除字符串首尾空白
valueOf() 返回某个字符串对象的原始值
1.5、字符串方法
2、创建String对象方式
声明:String对象的方法也可以在所有基本字符串值中访问到。
调用构造函数String():
var str = new String();
var str = new String('hello world');//初始化str,str.length = 11;
3、String访问及查找的方式
3.1访问(通过索引)
3.1.1、charAt()或[]
1个参数,参数为字符位置,返回字符
var strValue = new String('hello world');
console.log(strValue.charAt(1));//e
console.log(strValue[1]);//e,IE7及以下版本使用这种方式,会返回undefined
3.1.2、charCodeAt()
1个参数,参数为字符位置,返回字符编码
var strValue = new String('hello world');
console.log(strValue.charCodeAt(1));//101
3.2、查找位置
3.2.1、indexOf()
第一个参数为指定子字符串,第二个参数为检索位置。返回索引,如果没有找到则返回-1
var str = 'hello world'
str.indexOf('l');//2,返回找到的第一个字符的位置
str.indexOf('l',6);//9
3.2.2、lastIndexOf()
与indexOf()的区别在于,lastIndexOf()是从字符串的末尾向前搜索子字符串
4、字符方法
4.1、扩展字符串
concat()
接受任意数量参数,用于将一个或多个字符串拼接起来,返回拼接得到新的字符串副本。
var str = new String('hello');
var result = str.concat(' world');
console.log(result);//hello world
typeof result//"string"
4.2、获取子字符串方法
slice(),substr(),substring(),这三个方法都会返回被操作字符串的子字符串副本,而且也都接受1或2个参数,前闭后开[)
4.2.1、slice()
var str = 'hello';
str.slice(0,2);//"he",第一个参数指定字符串开始的位置,第二个参数表示字符串到哪里结束
str.slice(-3);//"llo",o代表-1,依次倒数,-3代表倒数第三个的l
str.slice(-2,-1);//"l",同理,-2代表倒数第二个l,-1代表倒数第一的o
4.2.2、substring()
var str = 'hello';
str.substring(0,2);//"he",此时的参数意义同str.slice(0,2)
str.substring(-3);//"hello",substring()方法会把所有负值参数转换为0
str.substring(-3,-2);//"",同上
4.2.3、substr()
var str = 'hello';
str.substr(1,2);//"el",第一个参数指定字符串的开始位置,第二个参数指定的则是返回的字符个数
str.substr(-3);//"llo",此时的参数意义同str.slice(-3)
str.substr(-3,-1);//"",substr()方法会将负的第二个参数转换为0
substr()方法传递负值时在IE中存在问题,它会返回原始的字符串,IE9修复了这个问题
4.3、将字符串转换为数组
split()
基于指定的分隔符(可以是字符串,也可以是RegExp对象)将字符串分割成多个子字符串,并将结果放在一个数组中,可接受可选的第二个参数,用于指定数组的大小,返回数组。
var color = 'blue,red,orange';
color.split();//["red,blue,orange"],长度为1
color.split(',');//["blue", "red", "orange"],长度为3
var color = 'blue-red-orange';
color.split('-');//["blue", "red", "orange"],长度为3
color.split(',',2);//["blue", "red"]
4.4、字符串大小写转换
toLowerCase(),toUpperCase()
var str = 'hello';
str.toUpperCase();//"HELLO"
str.toLowerCase();//"hello"
4.5、删除字符串空格方法
trim()
删除字符串中前置以及后缀的所有空格,然后返回结果副本。
var str = ' hello world ';
str.trim()//"hello world"
4.6、字符串的模式匹配方法
4.6.1、match()
参数:只接受一个参数,要么是一个正则表达式,要么是一个RegExp()对象。
返回:数组。数组中的第一项是与整个模式匹配的字符串,之后的每一项(如果有)保存着正则表达式捕获组匹配的字符串
本质上与调用exec()相同。
var text = 'cat, bat, sat, fat';
var pattern = /.at/;
var matches = text.match(pattern);
matches // ["cat"]
matches.input // "cat, bat, sat, fat"
matches.index // 0
4.6.2、search()
参数:与match()方法相同。
返回:字符串中第一个匹配项的索引,如果没有匹配项,则返回-1。
search()方法始终从前向后找
var text = 'cat, bat, sat, fat';
var pattern = /at/;
text.search(pattern) // 1
4.6.3、replace()
参数:接收两个参数,第一个参数可以是一个RegExp对象或者一个字符串(这个字符串不会转换成正则表达式),第二个参数可以是一个字符串或者一个函数。
如果第一个参数是字符串,那么只会替换第一个子字符串。要想替换所有子字符串,唯一的办法就是提供一个正则表达式,而且要指定全局标志(g)标志。
如果第二个参数是字符串,那么还可以使用一些特殊的字符序列,将正则表达式操作得到的值插入到结果字符串中。
也可以是函数,传递给函数的参数依次是模式的匹配项,模式的匹配项在字符串中的位置,和原始字符串。在正则表达式定义了多个捕获组的情况下,传递给函数的参数依次是模式的匹配项,第一个捕获组的匹配项,以此类推,但最后两个参数分别是模式的匹配项在字符串中的位置和原始字符串。
var text = 'xxx-love-xxx';
var pattern = /xxx/g;
var result = text.replace(pattern,'2')
result// "2-love-2"
text.replace(/(xxx)-\w{4}-(xxx)/g,'I love YOU');//"I love YOU"
var text = 'xxx-love-xxx';
var pattern1 = /xxx/g;
var result = text.replace(pattern1,'$$')
result// "$-love-$"
var result = text.replace(pattern1,'$&2')
result//"xxx2-love-xxx2"
var result = text.replace(pattern1,'$\'')
result//"-love-xxx-love-"