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方法的第二个参数,决定了返回数组的成员数。


截图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,539评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,911评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,337评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,723评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,795评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,762评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,742评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,508评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,954评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,247评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,404评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,104评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,736评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,352评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,557评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,371评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,292评论 2 352

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,231评论 0 4
  • 一、字符串在C#中,字符串是一系列不可修改的Unicode字符,创建字符串后,就不能修改它。要创建字符串,最常用的...
    CarlDonitz阅读 1,275评论 0 2
  • 夜的苍白 (文/亦浓) 安静的夜 夜空里一颗星星也无 月儿也偷了懒 霓虹冰冷的观望 夜虫瑟缩一角呢喃低吟 花儿偷偷...
    开在夜里的花儿阅读 275评论 4 8
  • 回顾一下,今天我学到了什么。 解剖我又复习了一遍大题,二十几道吧总共.发现自己有很多,地方缺漏,然后把一些缺漏都画...
    hi滚滚阅读 119评论 0 0
  • 如果你非要看透我的心 好吧,我即刻便解开锋刃 我不明白你的初衷 或许有爱便有恨 也许我也能看一眼 最后的跳动 触一...
    飞狐119阅读 478评论 3 1