React.js学习笔记(8) 字符串 和 ( String对象 )

(一) 字符串

(1) 字符串定义

字符串就是零个或多个排在一起的字符,放在单引号或双引号之中。

  • 单引号字符串的内部,可以使用双引号。双引号字符串的内部,可以使用单引号。

'key = "value"'

"It's a long journey"

  • 如果要在单引号字符串的内部,使用单引号(或者在双引号字符串的内部,使用双引号),就必须在内部的单引号(或者双引号)前面加上反斜杠,用来转义。

'Did she say \'Hello\'?'
// "Did she say 'Hello'?"

"Did she say \"Hello\"?"
// "Did she say "Hello"?"

  • 由于HTML语言的属性值使用双引号,所以很多项目约定JavaScript语言的字符串只使用单引号

(2) 转义

反斜杠(\)在字符串内有特殊含义,用来表示一些特殊字符,所以又称为转义符。

\0 null(\u0000)
\b 后退键(\u0008)
\f 换页符(\u000C)
\n 换行符(\u000A)
\r 回车键(\u000D)
\t 制表符(\u0009)
\v 垂直制表符(\u000B)
\' 单引号(\u0027)
\" 双引号(\u0022)
\ 反斜杠(\u005C)

(3)字符串与数组

字符串可以被视为字符数组,因此可以使用数组的方括号运算符,用来返回某个位置的字符(位置编号从0开始)。


var s = 'hello';
s[0] // "h"
s[1] // "e"
s[4] // "o"

// 直接对字符串使用方括号运算符
'hello'[1] // "e"

  • 字符串也无法直接使用数组的方法,必须通过call方法间接使用。

var s = 'hello';

s.join(' ') // TypeError: s.join is not a function

Array.prototype.join.call(s, ' ') // "h e l l o"


--------------------------------------------



let c = 'im a boy'

console.log(c[1],'c[1]就是取到字符串的第2个字符m')

let cc = Array.prototype.join.call(c, ',')     

console.log(cc,'Array.prototype.join.call()')


// join用于字符串:需要用call方法
// join用于数组:join方法以参数作为分隔符,将所有数组成员组成一个字符串返回。
// join还可以用于类数组对象


var s = 'hello';

s.join(' ') // TypeError: s.join is not a function

Array.prototype.join.call(s, ' ') // "h e l l o"

--------------------------------------------

上面代码中,如果直接对字符串使用数组的join方法,会报错不存在该方法。
但是,可以通过call方法,间接对字符串使用join方法。


不过,由于字符串是只读的,
那些会改变原数组的方法,比如push()、sort()、reverse()、splice()都对字符串无效,
只有将字符串显式转为数组后才能使用


(4) length属性

length属性返回字符串的长度,该属性也是无法改变的。


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

s.length = 3;
s.length // 5

s.length = 7;
s.length // 5






(二) String对象

(1) 概述

String对象是JavaScript原生提供的三个包装对象之一,用来生成字符串的包装对象。

var s1 = 'abc';
var s2 = new String('abc');

typeof s1 // "string"
typeof s2 // "object"

s2.valueOf() // "abc"


上面代码中,变量s1是字符串,s2是对象。

由于s2是对象,所以有自己的方法,valueOf方法返回的就是它所包装的那个字符串。


  • 除了用作构造函数,String对象还可以当作工具方法使用,将任意类型的值转为字符串。

String(true) // "true"
String(5) // "5"

(2)charAt()---------------------------完全可以用数组下标代替

charAt方法返回指定位置的字符,参数是从0开始编号的位置。


var s = new String('abc');

s.charAt(1) // "b"
s.charAt(s.length - 1) // "c"

----------------------------------------------------

这个方法完全可以用数组下标替代。

'abc'.charAt(1) // "b"
'abc'[1] // "b"

----------------------------------------------------

如果参数为负数,或大于等于字符串的长度,charAt返回空字符串。

'abc'.charAt(-1) // ""
'abc'.charAt(3) // ""

(3) concat()

concat方法用于连接两个字符串,返回一个新字符串,不改变原字符串。
( 返回连接后的新字符串,不改变原字符串)
( 事实上字符串不能被修改,这些方法都是返回新的字符串 )

(也用于数组,返回链接后的数组,不改变原数组)


var s1 = 'abc';
var s2 = 'def';

s1.concat(s2) // "abcdef"
s1 // "abc"
 

----------------------------------


该方法可以接受多个参数。

'a'.concat('b', 'c') // "abc"


----------------------------------


如果参数不是字符串,concat方法会将其先转为字符串,然后再连接。

var one = 1;
var two = 2;
var three = '3';

''.concat(one, two, three) // "123"
one + two + three // "33"

上面代码中,concat方法将参数先转成字符串再连接,所以返回的是一个三个字符的字符串。

作为对比,加号运算符在两个运算数都是数值时,不会转换类型,所以返回的是一个两个字符的字符串。


(4) slice()

slice方法用于从原字符串取出子字符串并返回,不改变原字符串。

(5) trim()

trim方法用于去除字符串两端的空格,返回一个新字符串,不改变原字符串。
( 返回新字符串,不改变原字符串 )
( 事实上字符串不能被修改,这些方法都是返回新的字符串 )


'  hello world  '.trim()              // trim是修剪的意思
// "hello world" 


该方法去除的不仅是空格,还包括制表符(\t、\v)、换行符(\n)和回车符(\r)。


'\r\nabc \t'.trim()   // 'abc'



 let g = ' \r\nabcdef '
let gg = g.trim()   // 'abcdef'
console.log(gg,'trim()去掉字符串两边的空格,换行符,回车符等,注意是两边的')

(6) toLowerCase(),toUpperCase()

toLowerCase方法用于将一个字符串全部转为小写,
toUpperCase则是全部转为大写。它们都返回一个新字符串,不改变原字符串。
( 返回新字符串,不改变原字符串 )
( 事实上字符串不能被修改,这些方法都是返回新的字符串 )


'Hello World'.toLowerCase()
// "hello world"

'Hello World'.toUpperCase()
// "HELLO WORLD"



-----------------------------------------------


这个方法也可以将布尔值或数组转为大写字符串,但是需要通过call方法使用。


String.prototype.toUpperCase.call(true)
// 'TRUE'
String.prototype.toUpperCase.call(['a', 'b', 'c'])
// 'A,B,C'


(7) localeCompare()

localeCompare方法用于比较两个字符串。它返回一个整数,
如果小于0,表示第一个字符串小于第二个字符串;
如果等于0,表示两者相等;
如果大于0,表示第一个字符串大于第二个字符串。


'apple'.localeCompare('banana')
// -1

'apple'.localeCompare('apple')
// 0



该方法的最大特点,就是会考虑自然语言的顺序。举例来说,正常情况下,大写的英文字母小于小写字母。

'B' > 'a' // false


(8) match()

match方法用于确定原字符串是否匹配某个子字符串,返回一个数组,成员为匹配的第一个字符串。如果没有找到匹配,则返回null。
( 返回一个数组,如后面还跟有.index和.input 则表示匹配开始的位置和原始字符串 )

  • match() 是匹配的意思


'cat, bat, sat, fat'.match('at') // ["at"]
'cat, bat, sat, fat'.match('xt') // null





返回数组还有index属性和input属性,分别表示匹配字符串开始的位置和原始字符串。


var matches = 'cat, bat, sat, fat'.match('at');
matches.index // 1
matches.input // "cat, bat, sat, fat"


(9) search()----------------------------对比数组中的indexof()方法

search方法的用法等同于match,但是返回值为匹配的第一个位置。如果没有找到匹配,则返回-1。
( 数组中indexof() 返回匹配到的第一个成员的位置(下标) )
(字符串中search() 返回值为匹配的第一个位置 )


'cat, bat, sat, fat'.search('at') // 1

'cat, bat, sat, fat'.search('m') // -1

(10) replace()

replace方法用于替换匹配的子字符串,一般情况下只替换第一个匹配(除非使用带有g修饰符的正则表达式)。


'aaa'.replace('a', 'b') // "baa"

(10) split()

split方法按照给定规则分割字符串,返回一个由分割出来的子字符串组成的数组。
( 返回由分割出来的子字符串组成的数组 )



'a|b|c'.split('|') // ["a", "b", "c"]




------------------------------------------------------

如果分割规则为空字符串,则返回数组的成员是原字符串的每一个字符。

'a|b|c'.split('') // ["a", "|", "b", "|", "c"]





------------------------------------------------------

如果满足分割规则的两个部分紧邻着(即中间没有其他字符),则返回数组之中会有一个空字符串。

'a||c'.split('|') // ['a', '', 'c']





------------------------------------------------------

如果满足分割规则的部分处于字符串的开头或结尾(即它的前面或后面没有其他字符),
则返回数组的第一个或最后一个成员是一个空字符串。

一个或最后一个成员是一个空字符串。
'|b|c'.split('|') // ["", "b", "c"]
'a|b|'.split('|') // ["a", "b", ""]





------------------------------------------------------

split方法还可以接受第二个参数,限定返回数组的最大成员


a|b|c'.split('|', 0) // []
'a|b|c'.split('|', 1) // ["a"]
'a|b|c'.split('|', 2) // ["a", "b"]
'a|b|c'.split('|', 3) // ["a", "b", "c"]
'a|b|c'.split('|', 4) // ["a", "b", "c"]

上面代码中,split方法的第二个参数,决定了返回数组的成员数。


React.js学习笔记(8) 字符串 和 ( String对象 )_第1张图片
截图

你可能感兴趣的:(React.js学习笔记(8) 字符串 和 ( String对象 ))