Javascript类型系统之String字符串类型详解
2019/6/27 22:20:06
本文主要是介绍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 = '\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字符串类型详解的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对找一找教程网网站的支持！
这篇关于Javascript类型系统之String字符串类型详解的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-23Vue新手入门教程：从零开始学习Vue框架
- 2024-11-23如何集成Ant Design Vue的图标
- 2024-11-23如何集成Ant Design Vue图标
- 2024-11-23使用vue CLI快速搭建Vue项目教程
- 2024-11-23Vue CLI多环境配置简单教程
- 2024-11-23Vue3入门教程：轻松搭建你的第一个Vue3应用
- 2024-11-23Vue3+Vite快速上手指南
- 2024-11-23Vue3阿里系UI组件入门指南
- 2024-11-23Vue3的阿里系UI组件入门指南
- 2024-11-23Vue3公共组件入门教程
