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

前端技术 2023/09/02 JavaScript

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\"
\'one\\
long\\
line\'
/*\"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字符串类型详解的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持!

本文地址:https://www.stayed.cn/item/3600

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。