JavaScript 字符串

字符串是一種數(shù)據(jù)類型，由字符組成，用于表示文本數(shù)據(jù)。

1. 創(chuàng)建字符串

使用字符串字面量就可以創(chuàng)建字符串。

var str1 = '';

var str2 = "";

以上例子創(chuàng)建了兩個(gè)空字符串。字符串可以用單引號(hào)包裹，也可以用雙引號(hào)包裹，效果是一樣的。

大部分前端程序員都會(huì)選擇單引號(hào)，這么做的原因是為了契合 HTML 的書寫習(xí)慣，拼接 HTML 的時(shí)候，HTML 元素的屬性可以直接使用雙引號(hào)包裹。

var html = '<p class="tip">更多請(qǐng)<a href="/detail" target="_blank">了解詳情</a></p>';

如果換成雙引號(hào)則需要轉(zhuǎn)義：

var html = "<p class=\"tip\">更多請(qǐng)<a href=\"/detail\" target=\"_blank\">了解詳情</a></p>";

2. 字符串轉(zhuǎn)義

轉(zhuǎn)義可以理解成字面意思，即轉(zhuǎn)換字符的含義。

比如想在字符串里描述換行符，就會(huì)使用 \n。

var str = '第一行\(zhòng)n第二行\(zhòng)n第三行';

console.log(str); // 將會(huì)輸出換行的字符串

通常轉(zhuǎn)義字符都是通過 \ 開頭的。

同理，如果需要在雙引號(hào)包裹的字符串中使用雙引號(hào)，或者單引號(hào)包裹的字符串中使用單引號(hào)，就需要對(duì)引號(hào)進(jìn)行轉(zhuǎn)義。

var str = '我'要'顯'示'一'堆'單'引'號(hào)';

這樣就會(huì)報(bào)錯(cuò)，JavaScript 無法知道這些引號(hào)的含義。

var str = '我\'要\'顯\'示\'一\'堆\'單\'引\'號(hào)';

通過 \n 表示一個(gè)單引號(hào)，就可以讓 JavaScript 理解，需要在字符串里描述一個(gè)單引號(hào)。

2.1 轉(zhuǎn)義表

JavaScript 支持以下字符的轉(zhuǎn)義：

3. 使用場(chǎng)景

3.1 用于描述文案

文案描述是最常見的情景之一，文案本身就是字符串，使用字符串是最契合場(chǎng)景的。

function gameover(age) {
  // 判斷是否游戲結(jié)束
  return age > 300;
}

var isGameover = gameover(666);

if (isGameover) {
  console.log('游戲結(jié)束');
}

游戲結(jié)束就是一個(gè)確確實(shí)實(shí)的文案，用于展現(xiàn)。

通過輸出日志簡(jiǎn)單調(diào)試的也是，也會(huì)用到字符串作為文案進(jìn)行觀察。

function something() {
  console.log('循環(huán)開始之前');

  var i
  for (i = 0; i < 10; i--) {
    console.log('循環(huán)中，第 ' + (i + 1) + ' 次循環(huán)');
  }

  console.log('循環(huán)結(jié)束');
}

something();

以上模擬一個(gè)程序卡死的狀態(tài)，通過調(diào)試輸出很容易發(fā)現(xiàn)是由死循環(huán)導(dǎo)致的，原因是將循環(huán)條件判斷后執(zhí)行的表達(dá)式寫錯(cuò)了。

3.2 拼接HTML

拼接 HTML 是前幾年大部分前端程序員做的最多的事情之一。

現(xiàn)在有了許多前端框架，解放了很多 HTML 拼接的工作。

早期想渲染一個(gè)列表，需要前端程序員在 JavaScript 中拼接 HTML 后再使用。

function getList(content) {
  return '<li class="list-item">' + content + '</li>';
}

var arr = [];

var i;
for (i = 1; i <= 10; i++) {
  arr.push(getList('我是第' + i + '條'));
}

document.body.innerHTML = [
  '<ul class="list">',
  arr.join(''),
  '</ul>',
].join('');

數(shù)組的 join 方法會(huì)將參數(shù)作為分隔符，將數(shù)組成員連接成一個(gè)字符串，默認(rèn)的分隔符是逗號(hào)。

不論是制作插件，還是業(yè)務(wù)需求的頁面元素、文案調(diào)整，都需要拼接 HTML。

3.3 其他任意場(chǎng)景

通常字符串可以用在任意場(chǎng)景，因?yàn)榭梢匀藶榈馁x予他任何含義。

如使用字符串的 'true'、'false' 來表示布爾值。

var isMan = 'false';

if (isMan === 'false') {
  console.log('不是男的');
}

或者可以使用字符串描述一個(gè)對(duì)象：

var person = '小明,男,24歲,吃飯、睡覺、打游戲';

name = person.split(',')[0];

console.log(name);

通過一定的規(guī)則來確定字符串的含義，如上面就是用逗號(hào)分隔，含義依次為姓名，性別，年齡，愛好。

取值的時(shí)候通過 split 方法，將字符串按指定的字符分隔成數(shù)組。

這種情況通常會(huì)用在后臺(tái)需要存儲(chǔ)簡(jiǎn)單的數(shù)據(jù)結(jié)構(gòu)，前端拿到的數(shù)據(jù)也許就是這樣的，需要自己切分。

正常情況下前端開發(fā)者在開發(fā)過程中不建議這樣做，因?yàn)橛懈玫臄?shù)據(jù)類型來描述這些內(nèi)容，JavaScript 提供了布爾值、對(duì)象來更好的、靈活的應(yīng)對(duì)這些場(chǎng)景。

4. 訪問字符串

字符串是無法修改的，只能進(jìn)行訪問。

var str = '我是字符串';

console.log(str); // 輸出："我是字符串"

這是直接訪問整個(gè)字符串，還可以訪問中間某一個(gè)字符。

var str = '一二三四五六七，7654321';

// 獲取第一個(gè)字符
console.log(str[0]); // 輸出："一"

// 獲取最后一個(gè)字符
console.log(str[str.length - 1]); // 輸出："1"
console.log(str.split('').pop()); // 輸出："1"

通過字符串[下標(biāo)]的形式可以訪問到某一個(gè)字符，這種訪問通常會(huì)用在字符串遍歷上。

5. 獲取字符串長(zhǎng)度

字符串可以直接通過 length 屬性獲取長(zhǎng)度。

var string = '1234567';

var len = string.length;

console.log(len); // 輸出：7

6. 常用的字符串拼接

6.1 使用 + 連接字符串

最常見的字符串拼接就是使用 + 符號(hào)：

6.2 數(shù)組的 join 方法

還有一種是使用數(shù)組來拼接字符串：

var str1 = '我是';
var str2 = '一只魚';

console.log([str1, str2].join('')); // 輸出：我是一只魚

這種方式也很常見。

注意：許多文獻(xiàn)中會(huì)提到這樣拼接字符串的性能更好，效率更高。大部分瀏覽器確實(shí)如此，其引擎針對(duì)性的做了特殊優(yōu)化，當(dāng)然只有在非常大量的字符串拼接時(shí)才能感知到性能上的區(qū)別。

6.3 字符串的 concat 方法

var str1 = '教練';
var str2 = '我想';
var str3 = '寫代碼';

var str4 = str1.concat(str2, str3);

console.log(str4);

使用 concat 可以接受任意個(gè)字符串作為參數(shù)，最后會(huì)拼接成一個(gè)字符串。

ES6提供了模版字符串，在模版字符串中拼接更加靈活。

7. 使用 String 對(duì)象創(chuàng)建字符串

String 對(duì)象也可以創(chuàng)建字符串，但不常用。

var str = new String('do sth.');

console.log(typeof str); // 輸出：object
console.log(str.concat('gugu')); // 輸出：do sth.gugu

可以觀察到，使用 String 對(duì)象生成的字符串，實(shí)際上是一個(gè)對(duì)象，

但使用 String 對(duì)象生成的字符串對(duì)象使用的時(shí)候基本和字符串無異。這部分會(huì)涉及到部分裝箱拆箱的知識(shí)，具體可以查閱相關(guān)章節(jié)。

8. 與字符串相關(guān)的常用方法

以下是一些常用方法，使用頻率較高：

8. 小結(jié)

字符串常常用于拼接 HTML ，且前端開發(fā)者習(xí)慣使用單引號(hào)來包裹字符串。

大量的字符串拼接，利用數(shù)組的 join 比使用 + 連接字符串性能更好，前提是非常大量。
使用 join 更大的好處是多行的時(shí)候換行方便。

字符串基本可以勝任任何數(shù)據(jù)場(chǎng)景，但一般不會(huì)這么做，因?yàn)?JavaScript 提供了多種數(shù)據(jù)類型來應(yīng)對(duì)各種業(yè)務(wù)場(chǎng)景。