ES6 -- 字符串

背景

const text = "??"; // 占用了兩個(gè)碼元(32位)
console.log("字符串長(zhǎng)度:", text.length);  // 字符串長(zhǎng)度: 2
console.log("使用正則測(cè)試:", /^.$/.test(text)); // 使用正則測(cè)試: false

console.log("得到第一個(gè)碼元:",text.charCodeAt(0)); // 得到第一個(gè)碼元: 55362
console.log("得到第二個(gè)碼元:",text.charCodeAt(1)); // 得到第二個(gè)碼元: 57271

console.log("得到第一個(gè)碼點(diǎn):",text.codePointAt(0)); // 得到第一個(gè)碼點(diǎn): 134071
console.log("得到第二個(gè)碼點(diǎn):",text.codePointAt(1)); // 得到第二個(gè)碼點(diǎn): 57271
  1. 早期氧腰,由于存儲(chǔ)空間寶貴,Unicode 使用 16位二進(jìn)制 來(lái)存儲(chǔ)文字刨肃。我們將一個(gè) 16位二進(jìn)制編碼 叫做 一個(gè)碼元(Code Unit)古拴。

  2. 后來(lái)真友,由于技術(shù)的發(fā)展,Uincode 對(duì)文字編碼進(jìn)行了擴(kuò)展盔然,將某些文字?jǐn)U展到了 32位(占用兩個(gè)碼元)桅打,并且是嗜,將某個(gè)文字對(duì)應(yīng)的 二進(jìn)制數(shù)字叫做碼點(diǎn)(Code Point)

  3. ES6 為了解決這個(gè)困擾挺尾,為字符串提供了方法:codePointAt 。根據(jù)字符串碼元的位置得到其碼點(diǎn)遭铺。

// 判斷字符串char,是32位甫题,還是16位
function is32bit(char) {
    // 如果碼點(diǎn)大于了16位二進(jìn)制的最大值涂召,則其是32位的
    return char.codePointAt(0) > 0xffff;
}

console.log(is32bit("??")); // true
console.log(is32bit("a")); // false

得到一個(gè)字符串碼點(diǎn)的真實(shí)長(zhǎng)度:

// 得到一個(gè)字符串碼點(diǎn)的真實(shí)長(zhǎng)度
function getLengthOfCodePoint(str) {
    var len = 0;
    for(let i = 0; i < str.length; i ++) {
        // i 在索引碼元
        if(str.codePointAt(i) > 0xffff) {
            // 當(dāng)前字符串,在這個(gè)位置芹扭,占用了兩個(gè)碼元
            i ++;
        }
        len ++;
    }
    return len;
}

console.log(getLengthOfCodePoint("aa??a5")); // 5
  1. 同時(shí),ES6為正則表達(dá)式添加了一個(gè)flag:u 舱卡。如果添加了該配置队萤,則匹配時(shí)使用碼點(diǎn)匹配。
const text = "??";
console.log("使用正則測(cè)試:", /^.$/u.test(text)); // 使用正則測(cè)試: true

字符串 API

以下均為字符串的實(shí)例(原型)方法要尔。

1. includes : 判斷字符串中是否包含指定的子字符串。

includes(str, index);

第二個(gè)參數(shù)index表示從哪個(gè)位置開(kāi)始查找既绩。

const text = "abc";

console.log(text.includes("c")); // true
console.log(text.includes("f")); // false

console.log(text.includes("a", 0)); // true
console.log(text.includes("b", 0)); // true
console.log(text.includes("b", 2)); // false

2. startsWith : 判斷字符串中是否以指定的字符串開(kāi)始还惠。

startsWith(str, index);

第二個(gè)參數(shù)index表示從哪個(gè)位置開(kāi)始是否是以str開(kāi)頭。

const text = "abc是";

console.log(text.startsWith('a')); // true
console.log(text.startsWith("f")); // false

console.log(text.startsWith('c', 2)); // true
console.log(text.startsWith("c", 1)); // false

3. endsWidth : 判斷字符串中是否以指定的字符串結(jié)尾船殉。

const text = "abc是";

console.log(text.endsWith("a")); // false
console.log(text.endsWith("是")); // true

4. repeat : 將字符串重復(fù)指定的次數(shù)西篓,返回新的字符串笆怠。

const text = "abc是";

console.log(text.repeat(2)); // abc是abc是
console.log(text.repeat(1)); // abc是

正則中的粘連標(biāo)記

標(biāo)記名:y

含義:匹配時(shí)誊爹,完全按照正則對(duì)象中的lastIndex位置開(kāi)始匹配瓢捉,并且匹配的位置必須在lastIndex位置办成。

const text = "hello world";

const reg = /w\w+/y;

reg.lastIndex = 6;

console.log(reg.test(text)); // true
console.log(reg.lastIndex);

模板字符串

ES6之前處理字符串繁瑣的兩個(gè)方面:

  1. 多行字符串
const demo = "hello \n world"

console.log(demo); // hello 
                   // world
  1. 字符串拼接
const a = 123;
const demo = "hello "+ a +"world";

console.log(demo); // hello 123world

在ES6中,提供了模板字符串的書(shū)寫(xiě)诈火,可以非常方便換行和拼接,要做的刀崖,僅僅是將字符串的開(kāi)始或結(jié)尾改完 ``符號(hào)拍摇。

const demo = `hello 
world`;

console.log(demo); // hello 
                   // world

如果要在字符串中拼接js表達(dá)式亮钦,只需要在模板字符串中使用 ${js表達(dá)式}充活。表達(dá)式可以是任何有意義的數(shù)據(jù),表達(dá)式可以嵌套映穗。

const a = 123;
const demo = `hello ${a} world`;

console.log(demo); // hello 123 world

模板字符串標(biāo)記

實(shí)現(xiàn)方式:

const love1 = "蘋(píng)果";
const love2 = "葡萄";

const demo = myTag`我喜歡吃 ${love1} 幕随,也喜歡吃 ${love2}`;

// 相當(dāng)于:demo = myTag(["我喜歡吃","也喜歡吃",""], "蘋(píng)果", "葡萄")

function myTag(parts) {
    console.log(parts); // ["我喜歡吃 ", " 蚁滋,也喜歡吃 ", ""]
    console.log(arguments); // 0: (3) ["我喜歡吃 ", " ,也喜歡吃 ", "", raw: Array(3)]   1: "蘋(píng)果"  2: "葡萄"

    const values = Array.prototype.slice.apply(arguments).slice(1);

    console.log(values); //  ["蘋(píng)果", "葡萄"]

    // parts.length = values.length + 1;

    let str = "";
    for(let i = 0; i < values.length; i ++) {
        str += parts[i] + "a" + values[i];
        if(i === values.length - 1) {
            str += parts[i + 1];
        }
    }
    return str;
}

console.log(demo); // 我喜歡吃 a蘋(píng)果 赘淮,也喜歡吃 a葡萄
  1. String.raw : 標(biāo)記模板字符串全部為普通字符辕录,沒(méi)有特殊或轉(zhuǎn)義字符梢卸。
const demo = String.raw`abc \n abc`;

console.log(demo); // abc \n abc 
  1. safe : 對(duì)危險(xiǎn)內(nèi)容進(jìn)行轉(zhuǎn)義。

未標(biāo)記前:

<p>
    <input type="text" id="text">
    <button id="btn">設(shè)置div的內(nèi)容</button>
</p>
<div id="container"></div>
const container = document.getElementById("container");
const text = document.getElementById("text");
const btn = document.getElementById("btn");

btn.onclick = function() {
    container.innerHTML = `<p>
                            ${text.value}
                        </p>`
}

標(biāo)記后:

const container = document.getElementById("container");
const text = document.getElementById("text");
const btn = document.getElementById("btn");

btn.onclick = function() {
    container.innerHTML = safe`<p>
                            ${text.value}
                        </p>`
}

function safe(parts) {
    const values = Array.prototype.slice.apply(arguments).slice(1);

    let str = "";
    for(let i = 0; i < values.length; i ++) {
        const v = values[i].replace(/</g, "&lt;").replace(/>/g, "&gt;");

        str += parts[i] + v;
        if(i === values.length - 1) {
            str += parts[i + 1];
        }
    }
    return str;
}

總結(jié):

在模板字符串書(shū)寫(xiě)之前蚣旱,可以加上標(biāo)記:

標(biāo)記名`模板字符串`

標(biāo)記是一個(gè)函數(shù)襟齿,函數(shù)參數(shù)如下:

  • 參數(shù)1:被插值分割的字符串?dāng)?shù)組。

  • 后續(xù)參數(shù):所有的插值位隶。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末开皿,一起剝皮案震驚了整個(gè)濱河市篮昧,隨后出現(xiàn)的幾起案子笋妥,更是在濱河造成了極大的恐慌,老刑警劉巖春宣,帶你破解...
    沈念sama閱讀 211,948評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異躏惋,居然都是意外死亡嚷辅,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,371評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén)扁位,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)趁俊,“玉大人域仇,你說(shuō)我怎么就攤上這事寺擂。” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,490評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵武鲁,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我挚瘟,道長(zhǎng)饲梭,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,521評(píng)論 1 284
  • 正文 為了忘掉前任订框,我火速辦了婚禮,結(jié)果婚禮上穿扳,老公的妹妹穿的比我還像新娘。我一直安慰自己矛物,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,627評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布峦萎。 她就那樣靜靜地躺著忆首,像睡著了一般。 火紅的嫁衣襯著肌膚如雪雄卷。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 49,842評(píng)論 1 290
  • 那天妒潭,我揣著相機(jī)與錄音揣钦,去河邊找鬼。 笑死冯凹,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的宇姚。 我是一名探鬼主播,決...
    沈念sama閱讀 38,997評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼阱持,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼魔熏!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起蒜绽,我...
    開(kāi)封第一講書(shū)人閱讀 37,741評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤躲雅,失蹤者是張志新(化名)和其女友劉穎鼎姊,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體即横,經(jīng)...
    沈念sama閱讀 44,203評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡裆赵,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,534評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了页藻。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,673評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡份帐,死狀恐怖楣导,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情筒繁,我是刑警寧澤,帶...
    沈念sama閱讀 34,339評(píng)論 4 330
  • 正文 年R本政府宣布驮宴,位于F島的核電站呕缭,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏恢总。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,955評(píng)論 3 313
  • 文/蒙蒙 一佳谦、第九天 我趴在偏房一處隱蔽的房頂上張望滋戳。 院中可真熱鬧,春花似錦奸鸯、人聲如沸可帽。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,770評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)扬虚。三九已至,卻和暖如春辜昵,著一層夾襖步出監(jiān)牢的瞬間咽斧,已是汗流浹背堪置。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,000評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工舀锨, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人坎匿。 一個(gè)月前我還...
    沈念sama閱讀 46,394評(píng)論 2 360
  • 正文 我出身青樓雷激,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親侥锦。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,562評(píng)論 2 349

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