Javascript类型系统之String字符串类型详解

javascript没有表示单个字符的字符型，只有字符串String类型，字符型相当于仅包含一个字符的字符串

字符串String是javascript基本数据类型，同时javascript也支持String对象，它是一个原始值的包装对象。在需要时，javascript会自动在原始形式和对象形式之间转换。本文将介绍字符串String原始类型及String包装对象

定义

字符串String类型是由引号括起来的一组由16位Unicode字符组成的字符序列

字符串类型常被用于表示文本数据，此时字符串中的每个元素都被视为一个代码点。每个元素都被认为占有此序列中的一个位置，用非负数值索引这些位置。首字符从位置0开始，第二个字符在位置1，依次类推

字符串的长度即其中元素的个数（比如，16 位值）。空字符串长度为零，因而不包含任何元素

Unicode编码

所有字符都可以写成"uxxxx"的形式，其中xxxx代表该字符的Unicode编码。比如，u00A9代表版权符号

var s = "u00A9";s // "©"

若一个字符串包含实际的文本数据，每个元素都被认为是一个单独的UTF-16单元。每个字符在JavaScript内部都是以16位（即2个字节）的UTF-16格式储存

但UTF-16有两种长度：对于U+0000到U+FFFF之间的字符，长度为16位（即2个字节）；对于U+10000到U+10FFFF之间的字符，长度为32位（即4个字节），而且前两个字节在0xD800到0xDBFF之间，后两个字节在0xDC00到0xDFFF之间

举例来说，U+1D306对应的字符"𝌆"，写成UTF-16就是0xD834 0xDF06。浏览器会正确将这四个字节识别为一个字符，但是javascript内部的字符长度总是固定为16位，会把这四个字节视为两个字符

var s = "uD834uDF06";s // "𝌆"s.length // 2

对于U+10000到U+10FFFF的4字节Unicode字符，javascript总是视为两个字符（字符length属性为2）

引号

字符串String是由双引号（"）或单引号（"）声明的。而Java则是用双引号声明字符串，用单引号声明字符。由于ECMAScript 没有字符类型，所以可使用这两种表示法中的任何一种，但左右引号必须匹配

//正确var sColor1 = "red";var sColor2 = "red";//错误var sColor1 = "red";var sColor2 = "red";

由单引号定界的字符串中可以包含双引号，由双引号定界的字符串也可以包含单引号

"key = "value"""It"s a long journey"

javascript代码可能会夹杂HTML代码的字符串，HTML代码也会夹杂javascript代码。因此，最好在javascript和HTML代码中各自使用独自的引号风格

javascript中使用单引号表示字符串，在HTML事件处理程序中使用双引号表示字符串

<button onclick = "alert（"thanks"）">click me</button>

反斜线

如果想在单引号定界的字符串中使用单引号，或在双引号定界的字符串中使用双引号，则需要使用反斜线（）

常见情况是英文缩写和所有格写法的撇号和单引号是同一个字符，所以这时必须使用反斜线（）来转义撇号

"Wouldn"t you prefer this book?" //"Wouldn"t you prefer this book?""Did she say "Hello"?" //"Did she say "Hello"?""Did she say "Hello"?" //"Did she say "Hello"?"

多行字符

字符串默认只能写在一行内，分成多行将会报错

//报错 Uncaught SyntaxError: Invalid or unexpected token
"a
b
c";

在ECMAScript3中，字符串必须写在一行中

在ECMAScript5中，字符串可以拆分成数行，每行必须以反斜线（）结束

如果希望在字符串直接量中另起一行，可以使用转义字符

//"onelongline""onelongline"/*"twolines"*/"two
lines"

转义字符

在javascript字符串，反斜线（）有着特殊的用途，反斜线符号后加一个字符，就不表示它们的字面含义，用来表示一些特殊字符，称为转义字符

空字节
换行
制表
空格
回车
f 进纸
\ 斜杠
" 单引号
" 双引号
xnn 以十六进制nn表示一个字符（n为0-f），如x41表示"A"
unnnn 以十六进制nnnn表示一个Unicode字符（n为0-f），如u03a3表示希腊字符ε
如果在非特殊字符前面使用反斜杠，则反斜杠会被省略

"a" // "a"

如果字符串需要包含反斜杠，则反斜杠前面需要再加一个反斜杠，用来对自身转义

"Prev \ Next" // "Prev Next"

特点

javascript中的字符串是不可变的。一旦字符串被创建，就永远无法改变它。要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量

可以通过+运算符连接其他字符串来创建一个新字符串

var lang = "java";lang = lang + "script"; //"javascript"

以上代码的实际过程是：首先创建一个能够容纳10个字符的新字符串，然后在这个字符串中填充"java"和"script"，最后一步是销毁原来的字符串"java"和"script"，因为这两个字符串已经没用了

这个过程在后台发生，也是在某些旧版本浏览器（IE6）拼接字符串速度慢的原因，但浏览器后面版本已经解决了这个低效率问题

转字符串

把一个值转换为字符串有两种方式，toString（）和String（）

[注意]可以使用空字符串"" + 某个值，将该值转换为字符串

toString（）

第一种是使用几乎每个值都有的toString（）方法，这个方法返回相应值的字符串表现

[注意]undefined和null没有该方法

undefined.toString（）;//错误null.toString（）;//错误true.toString（）;//"true"false.toString（）;//"false""abc".toString（）;//"abc"1.23.toString（）;//"1.23"（{}）.toString（）;//[object Object][1,2,3,4].toString（）;//"1,2,3,4"（new Date（））.toString（）;//"Sun Jun 05 2016 10:04:53 GMT+0800 （中国标准时间）"/ab/i.toString（）;//"/ab/i"

String（）

在不知道要转换的值是不是undefined或null时，可以使用转型函数String（）

转型函数String（）遵循下列规则：

【1】如果值是null，则返回"null"；如果值是undefined，则返回"undefined"

【2】如果值不是null或undefined，则调用toString（）方法并返回原始类型值

【3】若使用toString（）方法返回的是对象，则再调用valueOf（）方法返回原始类型值，若使用valueOf（）方法返回的是对象，会报错

// "3"String（{toString: function （） {return 3;}}）// "[object Object]"String（{valueOf: function （） {return 2;}}）// "3"String（{valueOf: function （） {return 2;},toString: function （） {return 3;}}）

长度属性

字符串String类型的每个实例都有一个length属性，表示字符串中的字符个数。由于字符串是不可变的，所以字符串的长度也不可变

字符串的length属性不会在for/in循环中枚举，也不能通过delete操作符删除

[注意]对于字符串s来说，最后一个字符的索引是s.length - 1

var str = "test";console.log（str.length）;//4str.length = 6;console.log（str,str.length）;//"test",4

实例方法

对象通用方法

String类型是与字符串对应的包装类型，继承了Object对象的通用方法toString（）、toLocaleString（）、valueOf（）这三个方法

【toString（）】

toString（）方法返回string的原始字符串值

【toLocaleString（）】

toLocaleString（）方法返回string的原始字符串值

【valueOf（）】

valueOf（）方法返回string的原始字符串值

console.log（"test".valueOf（））;//"test"console.log（"test".toString（））;//"test"console.log（"test".toLocaleString（））;//"test"

访问字符方法

字符串的访问字符方法总共有chartAt（）、中括号[]、charCodeAt（）和fromCharCode（）四种

【chartAt（）】

charAt（）方法接收一个基于0的字符位置的参数，返回指定位置的字符。当参数为空或NaN时，默认参数为0；当参数超出范围时，则返回一个空字符串

var str = "hello";console.log（str.charAt（1））;//econsole.log（str.charAt（-1））;//""console.log（str.charAt（10））;//""console.log（str.charAt（））;//h console.log（str.charAt（NaN））;//h

charAt（）方法涉及到Number（）函数的隐式类型转换，如果转换为数值，则按照上述规则输出字符串；如果转换为NaN，则输出第0个字符

var str = "hello";console.log（str.charAt（true））;//"e"console.log（str.charAt（false））;//"h"console.log（str.charAt（"abc"））;//"h"console.log（str.charAt（{}））;//"h"console.log（str.charAt（[2]））;//"l"

[注意]x.charAt（pos）与x.substring（pos, pos+1）、x.substr（pos,1）、x.slice（pos,pos+1）的结果相等

var str = "hello";console.log（str.charAt（1））;//"e"console.log（str.substring（1,2））;//"e"console.log（str.slice（1,2））;//"e"console.log（str.substr（1,1））;//"e"

【中括号】

ECMAScript5定义了另一个访问字符的方法，使用方括号加数字索引来访问字符串中的特定字符。如果参数超出范围或是NaN时，则输出undefined；没有参数时，会报错；该方法没有Number（）转型函数的隐式类型转换，但参数为单数值数组时可转换为数值

[注意]IE7-浏览器不支持

var str = "hello";console.log（str[0]）;//hconsole.log（str[[1]]）;//econsole.log（str[false]）;//undefinedconsole.log（str[-1]）;//undefinedconsole.log（str[NaN]）;//undefinedconsole.log（str[]）;//报错

【charCodeAt（）】

charCodeAt（）方法类似于charAt（）方法，接收一个基于0的字符位置的参数，但返回的是指定位置的字符16位Unicode编码。返回值是一个16位的整数，在0-65535之间，即0x0000-0xffff之间

参数为空或NaN时，默认参数为0；当参数超出范围时，则返回NaN

var str = "hello";console.log（str.charCodeAt（））;//104console.log（str.charCodeAt（0））;//104console.log（str.charCodeAt（1））;//101console.log（str.charCodeAt（-1））;//NaNconsole.log（str.charCodeAt（10））;//NaNconsole.log（str.charCodeAt（NaN））;//104

同样地，charCodeAt（）方法涉及到Number（）函数的隐式类型转换，如果转换为数值，则按照上述规则输出相应值；如果转换为NaN，则输出第0个字符的字符编码

var str = "hello";console.log（str.charCodeAt（true））;//101console.log（str.charCodeAt（false））;//104console.log（str.charCodeAt（"abc"））;//104console.log（str.charCodeAt（{}））;//104console.log（str.charCodeAt（[2]））;//l08

【fromCharCode（）】

String构造函数本身有一个静态方法:fromCharCode（）。这个方法的任务是接收一个或多个字符编码，然后把它们转换成一个字符串。从本质上看，这个方法与实例方法charCodeAt（）执行的是相反的操作。若参数为空为NaN时，则返回空字符串；若参数超出0-65535的范围，则输出字符不可控

console.log（String.fromCharCode（104,101,108,108,111））;//"hello"console.log（String.fromCharCode（0x6211,0x662f,0x5c0f,0x706b,0x67f4））;//"我是小火柴"console.log（String.fromCharCode（））;//""console.log（String.fromCharCode（NaN））;//""console.log（String.fromCharCode（-1））;console.log（String.fromCharCode（65560））;

如果一个字符占用四字节，则需要拆成两个字符表示

console.log（String.fromCharCode（0xD842, 0xDFB7））; // "𠮷"

字符串拼接

关于字符串拼接共有concat（）和加号+两种方法

【concat（）】

concat（）方法用于将一个或多个字符串拼接起来，返回拼接得到的新字符串，而原字符串不发生改变。若参数（第一个参数除外）不是字符串，则通过String（）方法隐式转换为字符串，再进行字符串拼接

var stringValue = "hello ";var result = stringValue.concat（"world","！"）;console.log（result）;//"hello world！"console.log（stringValue）;//"hello"

[注意]第一个参数只能是字符串，如果是其他类型（数组除外）则报错

（1）.concat（"2"）;//报错
（true）.concat（"false"）;//报错
（{}）.concat（"abc"）;//报错

[注意]由于数组也存在concat（）方法，参数会按照首先出现的参数是数组还是字符串来决定如何转换

"1,2,3,".concat（[4,5]）;//"1,2,3,4,5"
[1,2,3].concat（",4,5"）;//[1, 2, 3, ",4,5"]
【加号运算符（+）】

虽然concat（）是专门用来拼接字符串的方法，但实践中使用更多的还是加号运算符（+）。使用加号运算符在许多时候都比concat（）简单易行

var stringValue = "hello ";console.log（stringValue.concat（"world","！"））;//"hello world！"console.log（stringValue + "world" + "！"）;//"hello world！"

[注意]当操作数其中一个是字符串，或者对象转换为字符串时，才进行字符串拼接

1 + 2;//3"1" + 2;//"12"var o = {valueOf:function（）{return "1";}};o + 2;//"12"var o = {valueOf:function（）{return 1;}};o + 2;//3

创建子字符串

创建子字符串共有slice（）、substr（）和substring（）三种方法

【slice（）】

slice（start,end）方法需要两个参数start和end，返回这个字符串中从start位置的字符到（但不包含）end位置的字符的一个子字符串；如果end为undefined或不存在，则返回从start位置到字符串结尾的所有字符

如果start是负数，则start = max（length + start,0）

如果end是负数，则end = max（length + end,0）

start和end无法交换位置

var stringValue = "hello world";console.log（stringValue.slice（））;//"hello world"console.log（stringValue.slice（2））;//"llo world"console.log（stringValue.slice（2,undefined））;//"llo world"console.log（stringValue.slice（2,-5））;//"llo "console.log（stringValue.slice（2,-20））;//""console.log（stringValue.slice（20））;//""console.log（stringValue.slice（-2,2））;//""console.log（stringValue.slice（-2,-20））;//"" console.log（stringValue.slice（-2,20））;//"ld"console.log（stringValue.slice（-20,2））;//"he"console.log（stringValue.slice（-20,-2））;//"hello wor"

slice（）方法涉及到Number（）转型函数的隐式类型转换，当start被转换为NaN时，相当于start = 0；当end被转换为NaN时（end为undefined除外），则输出空字符串

var stringValue = "hello world";console.log（stringValue.slice（NaN））;//"hello world"console.log（stringValue.slice（0,NaN））;//""console.log（stringValue.slice（true,[3]））;//"el"console.log（stringValue.slice（null,undefined））;//"hello world"console.log（stringValue.slice（{}））;//"hello world"console.log（stringValue.slice（"2",[5]））;//"llo"

【substring（）】

substring（start,end）方法需要两个参数start和end，返回这个字符串中从start位置的字符到（但不包含）end位置的字符的一个子字符串；如果end为undefined或不存在，则返回从start位置到字符串结尾的所有字符

如果任一参数是NaN或负数，则被0取代

如果任一参数大于字符串长度，则被字符串长度取代

如果start 大于 end，则交换它们的值

var stringValue = "hello world";console.log（stringValue.substring（））;//"hello world"console.log（stringValue.substring（2））;//"llo world"console.log（stringValue.substring（2,undefined））;//"llo world"console.log（stringValue.substring（20））;//""console.log（stringValue.substring（-2,2））;//"he"console.log（stringValue.substring（NaN,2））;//"he"console.log（stringValue.substring（-2,20））;//"hello world"console.log（stringValue.substring（3,2））;//"l"console.log（stringValue.substring（3,NaN））;//"hel"console.log（stringValue.substring（-20,2））;//"he"console.log（stringValue.substring（-20,-2））;//""

同样地，substring（）方法也涉及到Number（）转型函数的隐式类型转换

var stringValue = "hello world";console.log（stringValue.substring（true,[3]））;//"el"console.log（stringValue.substring（null,undefined））;//"hello world"console.log（stringValue.substring（{}））;//"hello world"console.log（stringValue.substring（"2",[5]））;//"llo"

【substr（）】

substr（start,end）方法需要两个参数start和end，end代表返回的子字符串的字符个数；该方法返回这个字符串中从start位置的字符开始的end个字符的一个子字符串；如果end为undefined或不存在，则返回从start位置到字符串结尾的所有字符

如果start是负数，则start = max（length + start,0）

如果start是NaN，则相当于start = 0

如果end是负数或NaN，则end = 0，因此会返回空字符串

start和end无法交换位置

[注意]该方法不是ECMAScript标准，已经被弃用

[注意]IE8-浏览器在处理向substr（）传递负值的情况时存在问题，它会返回原始的字符串

var stringValue = "hello world";console.log（stringValue.substr（））;//"hello world"console.log（stringValue.substr（2））;//"llo world"console.log（stringValue.substr（2,undefined））;//"llo world"console.log（stringValue.substr（2,NaN））;//""console.log（stringValue.substr（NaN,2））;//"he"console.log（stringValue.substr（20））;//""console.log（stringValue.substr（-2,3））;//"ld"console.log（stringValue.substr（-2,20））;//"ld"console.log（stringValue.substr（-20,2））;//"he"console.log（stringValue.substr（-20,-2））;//"" console.log（stringValue.substr（2,5））;//llo w

同样地，substr（）方法也涉及到Number（）转型函数的隐式类型转换

var stringValue = "hello world";console.log（stringValue.substr（true,[3]））;//"el"console.log（stringValue.substr（null,undefined））;//"hello world"console.log（stringValue.substr（{}））;//"hello world"console.log（stringValue.substr（"2",[5]））;//"llo w"

字符串位置
有两个从字符串中查找子字符串位置的方法：indexOf（）和lastIndexOf（）

【indexOf（）】

indexOf（searchString,start）方法接收searchString和start两个参数，返回searchString首次出现的位置，如果没有找到则返回-1

该方法会隐式调用String（）转型函数，将searchString非字符串值转换为字符串；隐式调用Number（）转型函数，将start非数字值（undefined除外）转换为数值

searchString表示要搜索的子字符串；start表示该搜索的开始位置，若忽略该参数或该参数为undefined、NaN或负数时，start = 0

var string = "hello world world";console.log（string.indexOf（"ld"））;//9console.log（string.indexOf（"ld",undefined））;//9console.log（string.indexOf（"ld",NaN））;//9console.log（string.indexOf（"ld",-1））;//9console.log（string.indexOf（"ld",10））;//15console.log（string.indexOf（"ld",[10]））;//15console.log（string.indexOf（"true",[10]））;//-1console.log（string.indexOf（false,[10]））;//-1

【lastIndexOf（）】

lastIndexOf（searchString,start）方法接收searchString和start两个参数，返回searchString最后一次出现的位置，如果没有找到则返回-1

同样地，该方法会隐式调用String（）转型函数，将searchString非字符串值转换为字符串；隐式调用Number（）转型函数，将start非数字值（undefined除外）转换为数值

searchString表示要搜索的子字符串；start表示该搜索的开始位置，若忽略该参数或该参数为undefined、NaN时，start = length - 1

[注意]与indexOf（）方法不同，若start为负数，则该方法返回-1

var string = "hello world world";console.log（string.indexOf（"ld"））;//9console.log（string.indexOf（"ld",undefined））;//9console.log（string.indexOf（"ld",NaN））;//9console.log（string.indexOf（"ld",-1））;//-1console.log（string.indexOf（"ld",10））;//15console.log（string.indexOf（"ld",[10]））;//15console.log（string.indexOf（"true",[10]））;//-1console.log（string.indexOf（false,[10]））;//-1

【tips】查找出字符串所有符合条件的子字符串

可以通过循环调用indexOf（）或lastIndexOf（）来找到所有匹配的子字符串

function allIndexOf（str,value）{var result = [];var pos = str.indexOf（value）;while（pos > -1）{result.push（pos）;pos = str.indexOf（value,pos+value.length）;}return result;}console.log（allIndexOf（"helllhelllhelll","ll"））;//[2,7,12]

【trim（）】

ECMAScript5为所有字符串定义了trim（）方法。这个方法会创建一个字符串的副本，删除前置及后缀的所有空白字符，然后返回结果

由于trim（）方法返回的是字符串的副本，所以原始字符串中的前置及后缀空格会保持不变

[注意]IE8-浏览器不支持

var string = " hello world ";console.log（string.trim（））;//"hello world"console.log（string）;//" hello world "

空白字符不仅仅包括空格，还包括制表符（）、换行符（）和回车符（）

" abc ".trim（） // "abc"

此外，firefox、safari和webkit还支持非标准的trimRight（）用于删除字符串结尾的空白字符

var string = " hello world ";console.log（string.trimRight（））;//" hello world";

【tips】用trim（）来判断输入的字符是否为空

if（usename.trim（）.length）{alert（"correct"）;}else{alert（"error"）;}

【tips】用正则表达式模拟trim（）

function fnTrim（str）{return str.replace（/^s+|s+$/,""）} console.log（fnTrim（" hello world "））;//"hello world"

大小写转换

ECMAScript中涉及字符串大小写转换的方法有4个：toLowerCase（）、toLocaleLowerCase（）、toUpperCase（）、toLocaleUpperCase（）

toLowerCase（）和toUpperCase（）是两个经典的方法，借鉴自java.lang.String中的同名方法。而toLocaleLowerCase（）和toLocaleUpperCase（）方法则是针对特定地区的实现，对有些地区来说，针对地区的方法与其通用方法得到的结果相同，但少数语言（如土耳其语）会为Unicode大小写转换应用特殊的规则，这时候就必须使用针对地区的方法来保证实现正确的转换

【toUpperCase（）】

toUpperCase（）方法将字符串转换成大写

【toLowerCase（）】

toLowerCase（）方法将字符串转换成小写

【toLocaleUpperCase（）】

toLocaleUpperCase（）方法将字符串转换成大写（针对地区）

【toLocaleLowerCase（）】

toLocaleLowerCase（）方法将字符串转换成小写（针对地区）

[注意]在不知道自己的代码将在哪个语言环境中运行的情况下，使用针对地区的方法更稳妥

var string = "Hello World";console.log（string.toLowerCase（））;//hello worldconsole.log（string.toLocaleLowerCase（））;//hello worldconsole.log（string.toUpperCase（））;//HELLO WORLDconsole.log（string.toLocaleUpperCase（））;//HELLO WORLD

这4种方法均不支持String（）隐式类型转换，只支持字符串类型

（true）.toLowerCase（）;//报错
（2）.toLocaleLowerCase（）;//报错
（{}）.toUpperCase（）;//报错
（[]）.toLocaleUpperCase（）;//报错

[注意]大小写转换方法可以连续使用

var string = "Hello World";console.log（（string.toUpperCase（））.toLowerCase（））;//hello world

【localeCompare（）】

localeCompare（）方法用于比较两个字符串，遵循下列规则

【1】如果字符串在字母表中应该排在字符串参数之前，则返回一个负数（大多数情况下为-1）

【2】如果字符串等于字符串参数，则返回0

【3】如果字符串在字母表中应该排在字符串参数之后，则返回一个正数（大多数情况下为1）

var stringValue = "yellow";console.log（stringValue.localeCompare（"brick"））;//1 "y"> "b"console.log（stringValue.localeCompare（"yellow"））;//0 "yellow" == "yellow"console.log（stringValue.localeCompare（"zoo"））;//-1 "yellow" < "zoo"

[注意]虽然在字母表中大写字母在小写字母的前面，所以大写字母 < 小写字母。但localeCompare（）方法会考虑自然语言的排序情况，把"B"排在"a"的前面

console.log（"B".localeCompare（"a"））;//1console.log（"B" > "a"）;//falseconsole.log（"b".localeCompare（"a"））;//1console.log（"b" > "a"）;//true

以上所述是小编给大家介绍的Javascript类型系统之String字符串类型详解的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！