字符串
字符串就是零個(gè)或多個(gè)排在一起的字符,放在單引號(hào)或雙引號(hào)之中硼讽。
'abc'
"abc"
單引號(hào)字符串的內(nèi)部巢价,可以使用雙引號(hào)。雙引號(hào)字符串的內(nèi)部固阁,可以使用單引號(hào)壤躲。
'key="value"'
"It's a long journey"
多行與轉(zhuǎn)義
如果要在單引號(hào)字符串的內(nèi)部,使用單引號(hào)(或者在雙引號(hào)字符串的內(nèi)部备燃,使用雙引號(hào))碉克,就必須在內(nèi)部的單引號(hào)(或者雙引號(hào))前面加上反斜杠,用來轉(zhuǎn)義并齐。
'Did she say \'Hello\'?'
// "Did she say 'Hello'?"
"Did she say \"Hello\"?"
// "Did she say "Hello"?"
字符串默認(rèn)只能寫在一行內(nèi)漏麦,分成多行將會(huì)報(bào)錯(cuò)。
'a
b
c'
// SyntaxError: Unexpected token ILLEGAL
上面代碼將一個(gè)字符串分成三行况褪,JavaScript就會(huì)報(bào)錯(cuò)撕贞。
如果長(zhǎng)字符串必須分成多行,可以在每一行的尾部使用反斜杠窝剖。
var longString = "Long \
long \
long \
string";
longString
// "Long long long string"
上面代碼表示麻掸,加了反斜杠以后,原來寫在一行的字符串赐纱,可以分成多行脊奋,效果與寫在同一行完全一樣。注意疙描,反斜杠的后面必須是換行符诚隙,而不能有其他字符(比如空格),否則會(huì)報(bào)錯(cuò)起胰。
連接運(yùn)算符(+)可以連接多個(gè)單行字符串淮菠,用來模擬多行字符串。
var longString = 'Long '
+ 'long '
+ 'long '
+ 'string';
如果字符串的正常內(nèi)容之中浓领,需要包含反斜杠鳄乏,則反斜杠前需要再加一個(gè)反斜杠速梗,用來對(duì)自身轉(zhuǎn)義。
"Prev \ Next"
// "Prev \ Next"
常見的字符串方法
String.prototype.charAt()
charAt方法返回指定位置的字符,參數(shù)是從0開始編號(hào)的位置。
var s = new String('abc');
s.charAt(1) // "b"
s.charAt(s.length - 1) // "c"
String.prototype.charCodeAt()
charCodeAt方法返回給定位置字符的Unicode碼點(diǎn)(十進(jìn)制表示)疼阔,相當(dāng)于String.fromCharCode()的逆操作。
'abc'.charCodeAt(1); // 98
'十月驛'.charCodeAt(0);//21313
'0'.charCodeAt(0);//48
'9'.charCodeAt(0);//57
'a'.charCodeAt(0); //97
'z'.charCodeAt(0); //122
'A'.charCodeAt(0);//65
'Z'.charCodeAt(0);//90
可以發(fā)現(xiàn)'0-9'對(duì)應(yīng)的編碼是'48-57'
'a-z'對(duì)應(yīng)的編碼是'97-122'
'A-Z'對(duì)應(yīng)的編碼是'65-90'
我們可以利用這個(gè)特性來檢測(cè)嚴(yán)格用戶輸入
比如我檢測(cè)用戶輸入的字符是否為數(shù)字
function detectNum(str){
var n;
for(var i=0; i<str.length; i++){
n = str.charCodeAt(i) ;
if( n<48 || n>57){
return false
}
}
return true;
}
detectNum('12345');//ture
detectNum(' 123');//false 能夠檢測(cè)空格半夷,使用isNaN不能檢測(cè)空格
String.fromCharCode()
String對(duì)象提供的靜態(tài)方法(即定義在對(duì)象本身婆廊,而不是定義在對(duì)象實(shí)例的方法),主要是fromCharCode()巫橄。該方法的參數(shù)是一系列Unicode碼點(diǎn)淘邻,返回對(duì)應(yīng)的字符串。
String.fromCharCode(104, 101, 108, 108, 111)
// "hello"
查看0-10000的字符串
var str = '';
for(var i=0; i<10000; i++){
str+=String.fromCharCode(i);
}
document.body.innerHTML = str;
還可以用來加密字符串,
如果不想讓其他人看到你的輸入,可以對(duì)字符串進(jìn)行加密, 比如說密碼什么的
<input type="text" >
<input type="button" value="加密">
<input type="button" value="解密">
<div>...</div>
var input = document.getElementsByTagName('input')[0];
var encryptBtn = document.getElementsByTagName('input')[1];
var decryptBtn = document.getElementsByTagName('input')[2];
var div = document.getElementsByTagName('div')[0];
//加密
encryptBtn.onclick = function(){
var str = input.value;
var newStr = '';//加密之后的字符串
for(var i=0; i<str.length; i++){
var newCode = str.charCodeAt(i)+1000;
newStr += String.fromCharCode(newCode);
}
div.innerHTML = newStr;
}
//解密
decryptBtn.onclick = function(){
var str = input.value;
var newStr = '';
for(var i=0; i<str.length; i++){
var newCode = str.charCodeAt(i)-1000;
newStr += String.fromCharCode(newCode);
}
div.innerHTML = newStr;
}
String.prototype.indexOf()
這兩個(gè)方法用于確定一個(gè)字符串在另一個(gè)字符串中的位置湘换,都返回一個(gè)整數(shù)宾舅,表示匹配開始的位置。
找到一個(gè)之后就停止查找枚尼。
如果返回-1贴浙,就表示不匹配砂吞。
兩者的區(qū)別在于署恍,indexOf從字符串頭部開始匹配,lastIndexOf從尾部開始匹配蜻直。
'hello world'.indexOf('o') // 4
'JavaScript'.indexOf('script') // -1
'hello world'.lastIndexOf('o') // 7
它們還可以接受第二個(gè)參數(shù)盯质,對(duì)于indexOf方法,第二個(gè)參數(shù)表示從該位置開始向后查找
'hello world'.indexOf('o', 5) // 7 表示從第六位開始查找(包括第六位)
一個(gè)例子: 全局查找
找出所有包含'十月驛'的位置
var str = '成都十月驛教育咨詢有限公司(以下別稱:十月驛設(shè)計(jì)教育基地),是一家專業(yè)的IT設(shè)計(jì)培訓(xùn)公司概而。十月驛計(jì)教育成立于2008年';
var s='十月驛'
var i=0;
while(str.indexOf(s, i)!== -1){
var index = str.indexOf(s, i);
alert(index);
i=index+s.length;
}
substr(start, length) substring(start, end) slice(start, end)
獲取子字符串
substring 和slice 只有點(diǎn)細(xì)微的差別
slice的參數(shù)支持負(fù)數(shù), substring參數(shù)傳入負(fù)數(shù)當(dāng)作0來處理
'hello world'.slice(-3, -1);//rl 倒數(shù)第3位到倒數(shù)第1位
'hello world'.substirng(-3, -1);//''
我們使用slice就好了
一個(gè)例子: 截取字符串
<p>
<span>就是javaScript的簡(jiǎn)寫形式呼巷,是一種腳本語言
一種廣泛用于客戶端Web開發(fā)的腳本語言,常用來給HTML網(wǎng)頁添加動(dòng)態(tài)功能
就是javaScript的簡(jiǎn)寫形式赎瑰,是一種腳本語言
一種廣泛用于客戶端Web開發(fā)的腳本語言王悍,常用來給HTML網(wǎng)頁添加動(dòng)態(tài)功能</span>……
<a href="javascript:;">>>收縮</a>
</p>
p {
border: 10px solid #ccc;
background: #FFC;
width: 400px;
padding: 20px;
font-size: 16px;
font-family: 微軟雅黑;
margin: 40px auto 0;
}
var a = document.getElementsByTagName('a')[0];
var span = document.getElementsByTagName('span')[0];
var str = span.innerHTML;
var onOff = false;
a.onclick = function(){
if(!onOff){
span.innerHTML = str.slice(0, 18);
a.innerHTML = '>>展開';
}
else{
span.innerHTML = str;
a.innerHTML = '>>收縮';
}
onOff = !onOff;
}
String.prototype.split()
split方法按照給定規(guī)則分割字符串,返回一個(gè)由分割出來的子字符串組成的數(shù)組餐曼。
'a|b|c'.split('|') // ["a", "b", "c"]
如果分割規(guī)則為空字符串压储,則返回?cái)?shù)組的成員是原字符串的每一個(gè)字符。
'abc'.split('') // ["a", "b", "c"]
如果滿足分割規(guī)則的兩個(gè)部分緊鄰著(即中間沒有其他字符)源譬,則返回?cái)?shù)組之中會(huì)有一個(gè)空字符串集惋。
'a||c'.split('|') // ['a', '', 'c']
如果滿足分割規(guī)則的部分處于字符串的開頭或結(jié)尾(即它的前面或后面沒有其他字符),則返回?cái)?shù)組的第一個(gè)或最后一個(gè)成員是一個(gè)空字符串踩娘。
'|b|c'.split('|') // ["", "b", "c"]
'a|b|'.split('|') // ["a", "b", ""]
split方法還可以接受第二個(gè)參數(shù)刮刑,限定返回?cái)?shù)組的最大成員數(shù)。
'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相對(duì)應(yīng)的數(shù)組上有join方法,可以看成是splite的逆操作
join方法以參數(shù)作為分隔符雷绢,將所有數(shù)組成員組成一個(gè)字符串返回泛烙。如果不提供參數(shù),默認(rèn)用逗號(hào)分隔翘紊。
var a = [1, 2, 3, 4];
a.join(' ') // '1 2 3 4'
a.join(' | ') // "1 | 2 | 3 | 4"
a.join() // "1,2,3,4"
一個(gè)例子: 查找并高亮
<input type="text">
<input type="button" value="查找">
<p>
據(jù)沂蒙晚報(bào)報(bào)道胶惰,山東臨沂羅莊女孩徐玉玉8月19日接到了一通陌生電話,對(duì)方聲稱有一筆2600元助學(xué)金要發(fā)放給她霞溪。按照對(duì)方要求孵滞,徐玉玉將準(zhǔn)備交學(xué)費(fèi)的9900元打入了騙子提供的賬號(hào)……讓騙子得手的一個(gè)關(guān)鍵是,在這通陌生電話之前鸯匹,徐玉玉曾接到過教育部門發(fā)放助學(xué)金的通知坊饶。這意味著,騙子精準(zhǔn)掌握了徐玉玉的多類個(gè)人信息殴蓬。 目前黑客盜取個(gè)人信息匿级,已形成一個(gè)巨大產(chǎn)業(yè)鏈,一部分黑客在黑進(jìn)某些網(wǎng)站獲取信息后染厅,再在一些論壇痘绎、社交群中販賣信息。 據(jù)澎湃新聞報(bào)道肖粮,以“購買數(shù)據(jù)”孤页、“電話銷售”等關(guān)鍵詞,通過社交聊天軟件查找涩馆,找到一兩百個(gè)相關(guān)的群行施,這些群銷售包括“精確數(shù)據(jù)購買”、“機(jī)票數(shù)據(jù)”魂那、“淘寶數(shù)據(jù)”蛾号、“保健數(shù)據(jù)”、“電話數(shù)據(jù)”涯雅、“豐胸減肥數(shù)據(jù)“鲜结、“一手新生兒數(shù)據(jù)”等等手機(jī)號(hào)碼資源。
</p>
p {
border: 10px solid #ccc;
background: #FFC;
width: 400px;
padding: 20px;
font-size: 16px;
font-family: 微軟雅黑;
}
span {
background: yellow;
}
var input = document.getElementsByTagName('input')[0];
var btn = document.getElementsByTagName('input')[1];
var p = document.getElementsByTagName('p')[0];
var str = p.innerHTML;
btn.onclick = function () {
var searchText = input.value;
var arr = str.split(searchText);
p.innerHTML = arr.join('<span>'+searchText+'</span>');
}
擴(kuò)展練習(xí):
替換查找文本