JavaScrip-->字符串

字符串

字符串就是零個(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í):

替換查找文本

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末活逆,一起剝皮案震驚了整個(gè)濱河市精刷,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌划乖,老刑警劉巖贬养,帶你破解...
    沈念sama閱讀 217,084評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異琴庵,居然都是意外死亡误算,警方通過查閱死者的電腦和手機(jī)仰美,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,623評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來儿礼,“玉大人咖杂,你說我怎么就攤上這事∥梅颍” “怎么了诉字?”我有些...
    開封第一講書人閱讀 163,450評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)知纷。 經(jīng)常有香客問我壤圃,道長(zhǎng),這世上最難降的妖魔是什么琅轧? 我笑而不...
    開封第一講書人閱讀 58,322評(píng)論 1 293
  • 正文 為了忘掉前任伍绳,我火速辦了婚禮,結(jié)果婚禮上乍桂,老公的妹妹穿的比我還像新娘冲杀。我一直安慰自己,他們只是感情好睹酌,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,370評(píng)論 6 390
  • 文/花漫 我一把揭開白布权谁。 她就那樣靜靜地躺著,像睡著了一般憋沿。 火紅的嫁衣襯著肌膚如雪旺芽。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,274評(píng)論 1 300
  • 那天卤妒,我揣著相機(jī)與錄音甥绿,去河邊找鬼字币。 笑死则披,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的洗出。 我是一名探鬼主播士复,決...
    沈念sama閱讀 40,126評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼翩活!你這毒婦竟也來了阱洪?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,980評(píng)論 0 275
  • 序言:老撾萬榮一對(duì)情侶失蹤菠镇,失蹤者是張志新(化名)和其女友劉穎冗荸,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體利耍,經(jīng)...
    沈念sama閱讀 45,414評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蚌本,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,599評(píng)論 3 334
  • 正文 我和宋清朗相戀三年盔粹,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片程癌。...
    茶點(diǎn)故事閱讀 39,773評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡舷嗡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出嵌莉,到底是詐尸還是另有隱情进萄,我是刑警寧澤,帶...
    沈念sama閱讀 35,470評(píng)論 5 344
  • 正文 年R本政府宣布锐峭,位于F島的核電站中鼠,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏沿癞。R本人自食惡果不足惜兜蠕,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,080評(píng)論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望抛寝。 院中可真熱鬧熊杨,春花似錦、人聲如沸盗舰。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,713評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽钻趋。三九已至川陆,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蛮位,已是汗流浹背较沪。 一陣腳步聲響...
    開封第一講書人閱讀 32,852評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留失仁,地道東北人尸曼。 一個(gè)月前我還...
    沈念sama閱讀 47,865評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像萄焦,于是被迫代替她去往敵國(guó)和親控轿。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,689評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容