从屌丝到架构师的飞越(JavaScript篇)-String数据类型

一、介绍

这节课呢,我们来了解的是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-"

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容