JavaScript 字符串

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

1. 創建字符串

使用字符串字面量就可以創建字符串。

var str1 = '';

var str2 = "";

以上例子創建了兩個空字符串。字符串可以用單引號包裹，也可以用雙引號包裹，效果是一樣的。

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

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

如果換成雙引號則需要轉義：

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

2. 字符串轉義

轉義可以理解成字面意思，即轉換字符的含義。

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

var str = '第一行\n第二行\n第三行';

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

通常轉義字符都是通過 \ 開頭的。

同理，如果需要在雙引號包裹的字符串中使用雙引號，或者單引號包裹的字符串中使用單引號，就需要對引號進行轉義。

var str = '我'要'顯'示'一'堆'單'引'號';

這樣就會報錯，JavaScript 無法知道這些引號的含義。

var str = '我\'要\'顯\'示\'一\'堆\'單\'引\'號';

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

2.1 轉義表

JavaScript 支持以下字符的轉義：

3. 使用場景

3.1 用于描述文案

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

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

var isGameover = gameover(666);

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

游戲結束就是一個確確實實的文案，用于展現。

通過輸出日志簡單調試的也是，也會用到字符串作為文案進行觀察。

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

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

  console.log('循環結束');
}

something();

以上模擬一個程序卡死的狀態，通過調試輸出很容易發現是由死循環導致的，原因是將循環條件判斷后執行的表達式寫錯了。

3.2 拼接HTML

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

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

早期想渲染一個列表，需要前端程序員在 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('');

數組的 join 方法會將參數作為分隔符，將數組成員連接成一個字符串，默認的分隔符是逗號。

不論是制作插件，還是業務需求的頁面元素、文案調整，都需要拼接 HTML。

3.3 其他任意場景

通常字符串可以用在任意場景，因為可以人為的賦予他任何含義。

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

var isMan = 'false';

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

或者可以使用字符串描述一個對象：

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

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

console.log(name);

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

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

這種情況通常會用在后臺需要存儲簡單的數據結構，前端拿到的數據也許就是這樣的，需要自己切分。

正常情況下前端開發者在開發過程中不建議這樣做，因為有更好的數據類型來描述這些內容，JavaScript 提供了布爾值、對象來更好的、靈活的應對這些場景。

4. 訪問字符串

字符串是無法修改的，只能進行訪問。

var str = '我是字符串';

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

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

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

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

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

通過字符串[下標]的形式可以訪問到某一個字符，這種訪問通常會用在字符串遍歷上。

5. 獲取字符串長度

字符串可以直接通過 length 屬性獲取長度。

var string = '1234567';

var len = string.length;

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

6. 常用的字符串拼接

6.1 使用 + 連接字符串

最常見的字符串拼接就是使用 + 符號：

6.2 數組的 join 方法

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

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

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

這種方式也很常見。

注意：許多文獻中會提到這樣拼接字符串的性能更好，效率更高。大部分瀏覽器確實如此，其引擎針對性的做了特殊優化，當然只有在非常大量的字符串拼接時才能感知到性能上的區別。

6.3 字符串的 concat 方法

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

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

console.log(str4);

使用 concat 可以接受任意個字符串作為參數，最后會拼接成一個字符串。

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

7. 使用 String 對象創建字符串

String 對象也可以創建字符串，但不常用。

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

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

可以觀察到，使用 String 對象生成的字符串，實際上是一個對象，

但使用 String 對象生成的字符串對象使用的時候基本和字符串無異。這部分會涉及到部分裝箱拆箱的知識，具體可以查閱相關章節。

8. 與字符串相關的常用方法

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

8. 小結

字符串常常用于拼接 HTML ，且前端開發者習慣使用單引號來包裹字符串。

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

字符串基本可以勝任任何數據場景，但一般不會這么做，因為 JavaScript 提供了多種數據類型來應對各種業務場景。