JS原始类型String数字类型

定义

字符串是由引号包裹的一组由16位Unicode字符组成的字符序列

字符串类型常用于表示文本数据,每个元素被视为一个代码点,代码点占据字符序列中的一个位置,首字符从位置0开始,第二个字符位置是1,以此类推。字符串的长度等于元素的个数。

Unicode

JS采用UTF-16编码的Unicode字符集,JS中的字符串是一组无符号的16位Unicode字符序列。常用Unicode字符(编码介于U+0000 - U+FFFF之间)都是通过16为内码表示。JS中所有字符都可以通过\uXXXX形式表示,XXXX表示Unicode编码。

部分不能表示为16位Unicode的字符,遵循UTF-16的编码规则:用两个16位值组成一个序列表示(又称代理项对),所以长度为2的字符串有可能是一个Unicode字符。

示例:U+1D306对应的字符是"",对应的UTF-16是0xD834 0xDF06,浏览器可以将这四个字节识别为一个字符,但由于JS内部的字符长度是16位,所以会把它视为两个字符。

var s = '\uD834\uDF06';
s.length // 2

转义字符

JS中的\可以用来表示一些特殊的字符,称作转义字符。

\0 空字节 
\n 换行 
\t 制表 
\b 空格 
\r 回车 
\f 进纸 
\\ 斜杠 
\' 单引号 
\" 双引号 
\xnn 以十六进制nn表示一个字符(n为0-f),如\x41表示'A' 
\unnnn 以十六进制nnnn表示一个Unicode字符(n为0-f),如\u03a3表示希腊字符ε

赋值过程

JS中的字符串一旦创建就永远无法改变,所以要改变变量保存的字符串,需要用一个包含新值的字符串填充该变量,并销毁原来变量保存的字符串。

var s = 'hello'
s = 'world'
s // 'world'

过程:浏览器在后台创建一个容纳5个字符的新字符串,然后向字符串中填充world,最后销毁原来的hello

转字符串

把一个值转为字符串有两种方法:String()toString()

toString()

几乎每个值都有toString()方法,除了undefined和null。

1.toString() // '1'
true.toString() // 'true' 
({}).toString() // '[object Object]'
[1,2,3].toString() // '1,2,3'
null.toString() // 报错
undefined.toString() // 报错

String()

当不确定值是否是nullundefined时,可以使用String()转换,它会把null转换为'null',undefined转换为'undefined'。如果值不是null或undefined,则调用toString()方法并返回原始类型值。

String(1) // '1'
String(true) // 'true' 
String({}) // '[object Object]'
String([1,2,3]) // '1,2,3'
String(null) // 'null'
String(undefined) // 'undefined'

属性

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

var s = 'hello'
s.length // 5

方法

继承方法

String类型对应的包装类型,继承了Object对象的通用方法:toString()、toLocaleString()、valueOf()。三个方法均返回string的原始字符串。


'hello'.toString() // 'hello'
'hello'.toLocaleString() // 'hello'
'hello'.vauleOf() // 'hello'

访问字符方法

访问字符方法有charAt()、[]、charCodeAt()、fromCharCode()四种

charAt()接收一个基于0的字符位置作为参数,返回指定位置的字符。参数为空或NaN时相当于0,参数超出范围返回空字符串

var s = 'hello'
s.charAt(1) // 'e'
s.charAt() // 'h'
s.charAt(10) // ''

[]中括号加索引的方式访问指定位置的字符。当参数为空时报错,超出范围或NaN时返回undefined。

var s = 'hello'
s[] // 报错
s[1] // 'e'
s[10] // undefined
s['a'] // undefined

charCodeAt()方法接收一个基于0的字符位置作为参数,返回指定位置字符的16位Unicode编码。参数为空或NaN时相当于0,参数超出范围返回NaN

var s = 'hello'
s.charCodeAt() // 104
s.charCodeAt(1) // 101
s.charCodeAt(10) // NaN

fromCharCode()方法是String自身的一个静态方法,接收一个或多个字符编码,返回一个字符串,相当于charCodeAt()的逆向操作。参数为空时返回空字符串;参数超出0-65535的范围时返回字符不可控。

String.fromCharCode(104,101,108,108,111) // 'hello'
String.fromCharCode() // ''

字符串拼接

字符串拼接有concat()+两种方法

concat()方法用于将一个或多个字符串拼接起来,返回一个新的字符串。

注意: 由于数组也有concat()方法,所以会按照参数首先出现的是数组还是字符串来决定如何转换。

'hello'.concat('world', '!') // 'helloworld!'
[1,2,3].concat(4, 5) // [1,2,3,4,5]

+使用加号拼接字符串是较常用的的方法

var s = 'hello' + 'world' + '!'
s // 'helloworld!'

字符串截取

字符串截取的方法有slice()、substring()和substr()

slice(start[,end])接收两个参数,返回字符串从start位置(不包括start位置处的字符)到end位置的一个字符串。如果end不存在,则end等于字符串的长度值;如果start或end大于字符串长度,则start或end等于字符串长度。

如果start是负数,start = str.length + start
如果end是负数,end = str.length + end

var s = 'hello world'
s.slice(1) // 'ello world'
s.slice(1, s.length) // ello world'
s.slice(-1, 100) // 'd'
s.slice(-1, -100) // ''

substring(start[,end])接收两个参数,返回字符串从start位置(不包括start位置处的字符)到end位置的一个字符串。如果end不存在,则end等于字符串的长度值;如果start或end大于字符串长度,则start或end等于字符串长度。

如果start或end为负数,则被0取代
如果start大于end,则交换位置

var s = 'hello world'
s.substring(1) // 'ello world'
s.substring(1, s.length) // 'ello world'
s.substring(-1, 100) // 'hello world'
s.substring(-1, -100) // ''

substr(start[,end])方法不是ECMAScript标准的方法,已被弃用,不再介绍。

大小写转换

字符串大小写转换方法有toLowerCase()、toUpperCase()、toLocaleLowerCase()和 toLocaleUpperCase()四种

toLowerCase()将字符串转换为小写
toUpperCase()将字符串转换为大写
toLocaleLowerCase()将字符串转换为小写(针对时区)
toLocaleUpperCase()将字符串转换为大写(针对时区)


var s = 'Hello World'
s.toLowerCase() // 'hello world'
s.toUpperCase()  // 'HELLO WORLD'

s.toLocaleLowerCase() // 'hello world'
s.toLocaleUpperCase() // 'HELLO WORLD'

// 可连续调用
s.toLowerCase().toUpperCase() // 'HELLO WORLD'

查找字符串位置

查找字符串位置的方法有两个:indexOf()和lastIndexOf()。

indexOf(str[,start])方法接收两个参数,str表示要查找的字符串,start表示从何处开始查找。返回str首次出现的位置,如果没有找到则返回-1。如果start不存在或者为负数则默认为0.

var s = 'hello world'

s.indexOf('o') // 4
s.indexOf('o', 5) // 7
s.indexOf('a') // -1

lastIndexOf(str[,start])方法和indexOf()类似,不同的是lastIndexOf()是从右向左查找。

var s = 'hello world'

s.lastIndexOf('o') // 7
s.lastIndexOf('o', 5) // 4
s.lastIndexOf('a') // -1

应用:获取文件扩展名


function getFileFormat(url) {
  var pos = url.lastIndexOf('.')
  return url.slice(pos + 1)
}
getFileFormat('a.txt') // 'txt'

正则匹配

String类有match()、search()、 replace()、 split()四种字符串匹配方法

match()方法

match()方法接收一个正则或字符串作为参数,以数组形式返回匹配的内容。该方法和正则表达式的exec()方法类似,只是调换了RegExp和string的位置。

如果找不到匹配项,则返回null

var s = 'hello world'
s.match(/a/) // null

如果不设置全局标志,match()方法和exec()方法执行结果相同,返回第一次匹配的结果

var str = 'cat, sat, bat, fat'
var pattern = /.at/
var matcheRet = str.match(pattern)
var execRet = pattern.exec(str)
console.log(matcheRet, matcheRet.index, matcheRet.input)
console.log(execRet, execRet.index, execRet.input)

如果设置全局标志,match()方法返回一个数组,但是没有index和input属性。exec()方法依旧返回第一次匹配的结果。

var str = 'cat, sat, bat, fat'
var pattern = /.at/
var matcheRet = str.match(pattern)
var execRet = pattern.exec(str)
matcheRet, matcheRet.index, matcheRet.input
console.log(matcheRet, matcheRet.index, matcheRet.input)
console.log(execRet, execRet.index, execRet.input)

如果不设置全局标志,match()方法和exec()方法都包含捕获分组信息;如果设置全局标志,match()方法不包换捕获分组信息。

var str = 'cat, sat, bat, fat'
var pattern = /(.)at/
var matcheRet = str.match(pattern)
var execRet = pattern.exec(str)
console.log(matcheRet)
console.log(execRet)

var str = 'cat, sat, bat, fat'
var pattern = /(.)at/g
var matcheRet = str.match(pattern)
var execRet = pattern.exec(str)
console.log(matcheRet)
console.log(execRet)

search()方法

search()方法接收一个正则或字符串作为参数,返回匹配内容首次出现的位置。如果匹配不到则返回-1。该方法不执行全局匹配,会忽略全局标志。

var str = 'cat, sat, bat, fat'
var pattern = /.at/
var pos = str.search(pattern)
console.log(pos) // 0


var pattern2 = /.at/g
var pos2 = str.search(pattern)
console.log(pos2) // 0

replace()方法

replace()方法用于替换一个或多个字符串。接收两个参数:第一个是字符串或正则,表示待替换内容;第二个是字符串或函数,表示要替换的内容。该函数最终返回替换后的字符串。

var str = 'cat, bat, sat, fat'
var ret = str.replace('at', 'a')
var ret2 = str.replace(/at/g, 'a')
ret //  "ca, bat, sat, fat"
ret2 // "ca, ba, sa, fa"

replace()方法的第二个参数可以是短属性名

短属性名 说明
$& 与RegExp 相匹配的子串
$` 位于匹配子串左侧的文本
$' 位于匹配子串右侧的文本
$1,$2... 表示第N个匹配捕获组
var string = 'cat-bat-sat';
console.log(string.replace(/(.)(at)/g,'$&'));//'cat-bat-sat' 替换项:'cat' 'bat' 'sat'
console.log(string.replace(/(.)(at)/g,'$`'));//'-cat--cat-bat-' 替换项:'' 'cat-' 'cat-bat-'
console.log(string.replace(/(.)(at)/g,"$'"));//'-bat-sat--sat-' 替换项:'-bat-sat' '-sat' ''
console.log(string.replace(/(.)(at)/g,'$1'));//'c-b-s' 替换项:'c' 'b' 's'
console.log(string.replace(/(.)(at)/g,'$2'));//'at-at-at' 替换项:'at' 'at' 'at'

replace()的第二个参数可以是函数。当只有一个匹配项时函数接收三个参数:模式匹配项、匹配项的位置、原始字符串。当定义一个或多个捕获组时,参数依次是:模式匹配项、第一个捕获组匹配项、第二个捕获组匹配项...、第n个捕获组匹配项,最后两个参数仍是匹配项的位置和原始字符串

var str = 'cat, bat, sat'
var matchArr = []
var groupArr1 = []
var groupArr2 = []
var posArr = []
var textArr = []

str.replace(/(.)(at)/g, function(match, $1, $2, position, text) {
  matchArr.push(match)
  groupArr1.push($1)
  groupArr2.push($2)
  posArr.push(position)
  textArr.push(text)
})

matchArr // ["cat", "bat", "sat"]
groupArr1 // ["c", "b", "s"]
groupArr2 // ["at", "at", "at"]
posArr // [0, 5, 10]
textArr // ["cat, bat, sat", "cat, bat, sat", "cat, bat, sat"]

split()

split()方法接收两个参数:第一个参数是字符串或正则,表示匹配项;第二个参数(可选)表示匹配项的个数。该方法基于指定匹配项,将字符串分割成多个字符串,最终返回一个数组。

当第二个参数为空或大于匹配到的字符串个数时,默认返回所有匹配到的字符串

  var str = 'cat,bat,sat'
  var ret = str.split(',')
  var ret2 = str.split(',', 2)
  var ret3 = str.split(',', 10)
  var ret4 = str.split(/.at/)
  console.log(ret)  // ["cat", "bat", "sat"]
  console.log(ret2) // ["cat", "bat"]
  console.log(ret3) // ["cat", "bat", "sat"]
  console.log(ret4) // ["", ",", ",", ""]

参数中的正则表达式是否使用全局标志g对结果没有影响

去除首尾空格

trim()方法可以去除字符串前后的空白字符,空白字符不仅包括空格,还包括\t, \n, \r等转义字符。最终返回一个字符串副本。

var str = ' hello world '
var str2 = '\nhello world\r'
str.trim() // 'hello world'
str2.trim() // 'hello world'

字符串比较

localCompare()方法用于比较两个字符串,比较过程遵循以下规则:

  • 字符串在字母表中的位置在参数之前,返回一个负数(通常是-1)
  • 字符串在字母表中的位置等于参数,返回0
  • 字符串在字母表中的位置在参数之后,返回一个正数(通常是1)

'C'.localeCompare('b'); // 1
'c'.localeCompare('b'); // 1
'a'.localeCompare('b'); // -1

注意: 虽然大写字母排在字母表的前面,但是localeCompare()方法会考虑自然语言的排序,把C排在b的后面

优秀文章首发于聚享小站,欢迎关注!
原文地址:https://www.cnblogs.com/yesyes/p/15351827.html