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

网络编程 2024/11/16 佚名

3 1 2

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 = '\uD834\uDF06';
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中，字符串可以拆分成数行，每行必须以反斜线(\)结束

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

//"onelongline"
'onelongline'
/*"two
lines"*/
'two\nlines'

转义字符

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

\0 空字节
\n 换行
\t 制表
\b 空格
\r 回车
\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);//4
str.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));//e
console.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]);//h
console.log(str[[1]]);//e
console.log(str[false]);//undefined
console.log(str[-1]);//undefined
console.log(str[NaN]);//undefined
console.log(str[]);//报错

【charCodeAt()】

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

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

var str = "hello";
console.log(str.charCodeAt());//104
console.log(str.charCodeAt(0));//104
console.log(str.charCodeAt(1));//101
console.log(str.charCodeAt(-1));//NaN
console.log(str.charCodeAt(10));//NaN
console.log(str.charCodeAt(NaN));//104

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

var str = "hello";
console.log(str.charCodeAt(true));//101
console.log(str.charCodeAt(false));//104
console.log(str.charCodeAt('abc'));//104
console.log(str.charCodeAt({}));//104
console.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'));//9
console.log(string.indexOf('ld',undefined));//9
console.log(string.indexOf('ld',NaN));//9
console.log(string.indexOf('ld',-1));//9
console.log(string.indexOf('ld',10));//15
console.log(string.indexOf('ld',[10]));//15
console.log(string.indexOf('true',[10]));//-1
console.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'));//9
console.log(string.indexOf('ld',undefined));//9
console.log(string.indexOf('ld',NaN));//9
console.log(string.indexOf('ld',-1));//-1
console.log(string.indexOf('ld',10));//15
console.log(string.indexOf('ld',[10]));//15
console.log(string.indexOf('true',[10]));//-1
console.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 '

　　空白字符不仅仅包括空格，还包括制表符(\t)、换行符(\n)和回车符(\r)

'\r\nabc \t'.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 world
console.log(string.toLocaleLowerCase());//hello world
console.log(string.toUpperCase());//HELLO WORLD
console.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'));//1
console.log('B' > 'a');//false
console.log('b'.localeCompare('a'));//1
console.log('b' > 'a');//true

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

js,string字符串类型

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“Javascript类型系统之String字符串类型详解”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

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

Javascript实现图片加载从模糊到清晰显示的方法

JS模仿腾讯图片站的图片翻页按钮效果完整实例

评论“Javascript类型系统之String字符串类型详解”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

Javascript实现图片加载从模糊到清晰显示的方法

JS模仿腾讯图片站的图片翻页按钮效果完整实例

评论“Javascript类型系统之String字符串类型详解”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存