摘要：基礎(chǔ)知識(shí)字符串中常用的方法在中用單雙引號(hào)包裹起來(lái)的都是字符串字符串就是由到多個(gè)字符組成的特點(diǎn)一以數(shù)字作為索引，從零開(kāi)始特點(diǎn)二有屬性，存儲(chǔ)的是當(dāng)前字符串中字符的個(gè)數(shù)字符長(zhǎng)度如果指定的索引不存在獲取的結(jié)果是真實(shí)項(xiàng)目中，我們經(jīng)常操作字符串，此時(shí)

在JS中用單（雙）引號(hào)包裹起來(lái)的都是字符串

var str="welcome to my home,my name is candy!"
//=>字符串就是由0到多個(gè)字符組成的
//特點(diǎn)一：以數(shù)字作為索引，從零開(kāi)始
//特點(diǎn)二：有l(wèi)ength屬性，存儲(chǔ)的是當(dāng)前字符串中字符的個(gè)數(shù)（字符長(zhǎng)度）
//str[100]->undefined 如果指定的索引不存在獲取的結(jié)果是undefined

真實(shí)項(xiàng)目中，我們經(jīng)常操作字符串，此時(shí)我們需要掌握常用的一些字符串操作方法
console.dir(String.prototype)

charAt &&charCodeAt

str.charAt(索引)：返回指定索引位置的字符，和str[索引]的區(qū)別在于，當(dāng)指定的索引不存在的時(shí)候，中括號(hào)的方式獲取的是undefined，而charAt獲取的是空字符串
str.charCodeAt(索引) :在charAt基礎(chǔ)上，把獲取的字符變?yōu)閡nicode編碼值（對(duì)應(yīng)ASCII碼表）索引不存在的時(shí)候charCodeAt獲取的是NaN
48-57：0-9
65-90：A-Z
97-122：a-z
String.formCharCode(十進(jìn)制的unicode值)：把值按照ASCII碼表中的信息，轉(zhuǎn)換為原有的字符，和charCodeAt正好對(duì)應(yīng)

substr && substring && slice

實(shí)現(xiàn)字符串截取的三個(gè)辦法
str.substr(n,m)：從索引n開(kāi)始，截取m個(gè)字符
str.sunstring(n,m)：從索引n開(kāi)始，截取到索引為m處（不包含m）,把找到的部分截取
str.slice(n,m)：和substring語(yǔ)法一樣，區(qū)別在于slice支持以負(fù)數(shù)做索引

當(dāng)索引是負(fù)數(shù)的時(shí)候，瀏覽器在處理的時(shí)候，使用字符串的總長(zhǎng)度加上負(fù)數(shù)索引，然后按照正數(shù)處理操作。
細(xì)節(jié)知識(shí)點(diǎn)：
1、如果只傳遞n(str.substr(n)/str.substring(n)/str.slice(n)/),相當(dāng)于從索引n開(kāi)始一直截取到字符串的末尾
2、如果傳遞的索引值超出最大限制，也是把能截取的部分截取掉即可
3、如果一個(gè)參數(shù)都不傳遞：相當(dāng)于把整個(gè)字符串都截取（字符串的克?。?/p>

toUpperCase && toLowerCase

str.toUpperCase :把字母全部大寫(xiě)
str.toLowerCase :把字母全部小寫(xiě)

indexOf && lastIndexOf

str.indexOf：獲取當(dāng)前字符在字符串中第一次出現(xiàn)位置的索引
str.lastIndexof ：獲取當(dāng)前字符在字符串中最后一次出現(xiàn)位置的索引

如果當(dāng)前字符在字符串中沒(méi)有出現(xiàn)過(guò)，結(jié)果是-1；我們根據(jù)這個(gè)規(guī)律可以驗(yàn)證一下當(dāng)前字符串中是否包含某個(gè)字符

if(str.indexOf("?")===-1){
    //沒(méi)有出現(xiàn)過(guò)
}
if(str.indexOf("?")>=0){
    //出現(xiàn)過(guò)
}

split

str.split：按照某一個(gè)字符把字符串拆分成數(shù)組中的某一項(xiàng)，和數(shù)組中的join方法是對(duì)應(yīng)的

replace

str.replace ：實(shí)現(xiàn)字符的替換
執(zhí)行一次replace只能替換一次，如果有好幾個(gè)都需要替換，在不使用正則的情況下我們需要執(zhí)行很多次replace；
有些需求即使執(zhí)行很多次replace也實(shí)現(xiàn)不了，此時(shí)需要使用正則處理，真實(shí)項(xiàng)目中replace一般都是和正則搭配使用的

trim && trimLeft && trimRight

str.trimLeft ：去除字符串開(kāi)始的空格
str.trimRight ：去除字符串結(jié)尾的空格
str.trim ：去除字符串首尾的空格

獲取地址欄中URL地址問(wèn)號(hào)傳遞的參數(shù)值
"https://www.baidu.com/s?wd=javascript&rsv_spt=1&issp=1"
"https://www.baidu.com/s?wd=node&rsv_spt=1&issp=1"
目標(biāo)：把問(wèn)號(hào)傳遞的參數(shù)值分別的解析出來(lái)
obj={wd:"javascript",rsv_spt:1,issp:1}

var str="https://www.baidu.com/s?wd=javascript&rsv_spt=1&issp=1";
//=>obj={wd:"javascript",rsv_spt:1,issp:1}

//=>方案一：
var questionIndex=str.indexOf("?");
str=str.substring(questionIndex+1);
console.log(str);//=>"wd=javascript&rsv_spt=1&issp=1"
var ary=str.split("&");
console.log(ary)//=>["wd=javascript","rsv_spt=1","issp=1"]
var obj={}
for(var i=0;i
function queryURLParameter(url){
    //=>url:傳遞的參數(shù)（我們當(dāng)前要解析的url地址）
    var quesIndex=url.indexOf("?"),
        obj={}
    if(quesIndex===-1){//->url中沒(méi)有問(wèn)號(hào)傳參
        return obj;
    }
    url=url.substr(quesIndex+1);
    var ary=url.split("&");
    for(var i=0;i
String.prototype.myQueryURLParameter=function
 myQueryURLParameter(){
        var obj={},
              reg=/([^=?&]+)=([^=?&]+)/g;
        this.replace(reg,function(){
            var arg=arguments;
            obj[arg[1]]=arg[2];
        })
        return obj;
    }
var str="https://www.baidu.com/s?wd=javascript&rsv_spt=1&issp=1";
console.log(str.myQueryURLParameter());
案例二（模擬驗(yàn)證碼功能實(shí)現(xiàn)）
真實(shí)項(xiàng)目中的驗(yàn)證碼：
真實(shí)項(xiàng)目中的驗(yàn)證碼一般都是后臺(tái)處理的，后臺(tái)返回給客戶(hù)端展示的是一個(gè)圖片（圖片中包含了驗(yàn)證碼）

此案例使用前端js代碼模擬驗(yàn)證碼實(shí)現(xiàn)：



    
    
    


    

    


//1-code.js 此處完成頁(yè)面刷新 驗(yàn)證碼更換

var codeBox=document.getElementById("codeBox");
//=>生成四位隨機(jī)驗(yàn)證碼：取值范圍
var areaStr="0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
//=>areaStr.length:62(0-61)
var result="";
for(var i=0;i<4;i++){
    // =>隨機(jī)獲取0~61之間的整數(shù)，作為接下來(lái)獲取字符的索引
    var ran=Math.round(Math.random()*61);
    //=>根據(jù)索引獲取一個(gè)隨機(jī)字符
    var char=areaStr.charAt(ran);
    //=>把每次循環(huán)獲取的字符放在最后的結(jié)果（result）中
    result+=char;
}
codeBox.innerHTML=result;

/***
2-code.js 
此處代碼迭代1-code.js 將上述代碼封裝成函數(shù)queryCode;
并給驗(yàn)證碼顯示區(qū)添加點(diǎn)擊刷新的效果
***/
var codeBox=document.getElementById("codeBox");
//=>queryCode:獲取四位驗(yàn)證碼
function queryCode(){
    var result="",
        areaStr="0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
    for(var i=0;i<4;i++){
        var ran=Math.round(Math.random()*61);
        result+=areaStr[ran];
    }
    codeBox.innerHTML=result;
}
//=>加載頁(yè)面時(shí)需要執(zhí)行一次這個(gè)方法：生成四位驗(yàn)證碼
queryCode();
//=>點(diǎn)擊盒子重新生成驗(yàn)證碼(此處不加小括號(hào)：這塊只是在把函數(shù)綁定給元素的點(diǎn)擊事件，方法還沒(méi)有執(zhí)行,點(diǎn)擊的時(shí)候才執(zhí)行)
codeBox.onclick=queryCode;
/***
3-code.js
此處代碼迭代2-code.js
完善隨機(jī)四位驗(yàn)證碼重復(fù)情況（去重）
****/
var codeBox=document.getElementById("codeBox");
//=>queryCode:獲取四位驗(yàn)證碼
function queryCode(){
    var result="",
        areaStr="0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
    for(var i=0;i<4;i++){
        var ran=Math.round(Math.random()*61),
            char=areaStr[ran];
            //=驗(yàn)證一下新獲取的char字符是否已經(jīng)在result中存在了,如果存在了我們不存儲(chǔ)，重新獲取一遍，反之才累加到result中
            if(result.indexOf(char)>-1){
                i--;
                continue;
            }
        result+=char;
    }
    codeBox.innerHTML=result;
}

queryCode();
codeBox.onclick=queryCode;
/***
4-code.js
此處代碼迭代3-code.js
完善大小寫(xiě)字母重復(fù)情況
***/
var codeBox=document.getElementById("codeBox");
//=>queryCode:獲取四位驗(yàn)證碼
function queryCode(){
    var result="",
        areaStr="0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
    for(var i=0;i<4;i++){
        var ran=Math.round(Math.random()*61),
            char=areaStr[ran];
            //=>a和A也算重復(fù)，該如何處理？
            //result="Ab" "ab"
            //char="a"    "a"
            //result.toLowerCase().indexof(char.toLowerCase())===-1
            if(result.toLowerCase().indexOf(char.toLowerCase())>-1){
                i--;
                continue;
            }
        result+=char;
    }
    codeBox.innerHTML=result;
}
queryCode();
codeBox.onclick=queryCode;
/*
5-code.js
此方法為擴(kuò)展方法，去重辦法是將每此隨機(jī)獲取的字符去掉
并根據(jù)隨機(jī)字符對(duì)應(yīng)的unicode碼判斷是否為字母：
如果為大寫(xiě)字母則將小寫(xiě)字母一并去掉
如果為小寫(xiě)字母則將大寫(xiě)字母一并去掉
*/
var codeBox=document.getElementById("codeBox");
function queryCode(){
    var areaStr="0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM",
        result="";
    for(var i=0;i<4;i++){
        var ran=Math.round(Math.random()*(areaStr.length-1));
        var char=areaStr.charAt(ran);
        var charCode=areaStr.charCodeAt(ran);
        if(charCode>=65&&charCode<=90){
            areaStr=areaStr.replace(char.toLowerCase(),"");
        }else if(charCode>=97 &&charCode<=122){
            areaStr=areaStr.replace(char.toUpperCase(),"");
        }
        areaStr=areaStr.replace(char,"");
        result+=char;
    }
    codeBox.innerHTML=result;
}
queryCode();
codeBox.onclick=queryCode;