JavaScript 中 toString 的奇妙使用

前端小茶馆發表於2024-05-27
JavaScript

JavaScript 中的toString()方法，我們通常會一些其他型別的變數，轉為字串型別。但這裡還有一些其他奇妙的用法。

不同的型別呼叫 toString() 會得到不同的結果。我們來一一分析下。

1. 函式型別

我們開發者自定義的函式，和 JavaScript 官方內建的函式，在呼叫 toString 時，輸出是不一樣的。

function user() {
  const name = "蚊子";
}
user.toString(); // 'function user() {const name = "蚊子";}'
Math.abs.toString(); // 'function abs() { [native code] }'

自定義函式在呼叫toString()時，輸出的是函式體的內容。而內建函式，則輸出的是native code。

2. Boolean 型別

boolean 型別的最簡單，就是把 true 和 false 轉為對應的字串。

const yes = true;
const no = false;

yes.toString(); // 'true'
no.toString(); // 'false'

3. 數字型別

可以把數字轉為對應進位制的字串toString(radix)，傳入的引數為要轉換的進位制，範圍是2~36之間，若不傳參，則預設轉為 10 進位制的字串。

const count = 10;

console.log(count.toString()); // 輸出 '10'
console.log((17).toString()); // 輸出 '17'
console.log((17.2).toString()); // 輸出 '17.2'

const x = 6;

console.log(x.toString(2)); // 轉為2進位制，輸出 '110'
console.log((254).toString(16)); // 轉為16進位制，輸出 'fe'

console.log((-10).toString(2)); // 轉為2進位制，輸出 '-1010'
console.log((-0xff).toString(2)); // 16進位制轉為2進位制，輸出 '-11111111'

還有一個常用的方法parseInt(stirng, radix)，把當前字串以 radix 指定的進位制，轉為 10 進位制的數字。

parseInt("14", 8); // 8進位制的14轉為10進位制，輸出12
parseInt("a", 16); // 16進位制的a轉為10進位制，輸出10
parseInt("1011", 2); // 2進位制的1011轉為10進位制，輸出11

我們把 parseInt()和toString()進行結合，可以在2~36進位制之間任意轉換。

const transform = (base, from, to) => {
  if (from < 2 || from > 36 || to < 2 || to > 36) {
    throw new RangeError("transform radix argument must be between 2 and 36");
  }
  return parseInt(base, from).toString(to);
};

先將 base 轉為 10 進位制，然後再透過 toString()轉為對應的進位制。

transform(14, 8, 16); // 將8進位制的14轉為16進位制，輸出'c'
transform(1011, 2, 16); // 將2進位制的1011轉為16進位制，輸出'b'
transform("ff", 16, 2); // 將16進位制的‘ff’轉為2進位制，輸出'11111111'

4. 陣列型別

陣列型別不是基本型別，它會把每項按照上面的規則轉為字串後，以英文逗號,拼接陣列的所有項，若陣列有多層，則展開所有。

const arr = [
  123.45,
  () => {
    const a = "這是自定義函式";
  },
  Math.abs,
  true,
  false,
  "abc",
  ["arr", 1, 2],
  null,
  undefined,
  1,
];

arr.toString(); // '123.45,() => {const a = "這是自定義函式";},function abs() { [native code] },true,false,abc,arr,1,2,,,1'

輸出的字串比較長，不過我們也能發現其中的幾個特點：

  1. 這裡把陣列中的所有項均列了出來，沒有更深層的陣列；
  2. 英文逗號,拼接展開的所有項；
  3. null 和 undefined 在轉為字串後丟失，但位置還在;

5. 日期物件型別

Date 物件，toString() 方法返回一個表示該物件的字串。該 toString 方法總是返回一個美式英語日期格式的字串。若 Date 物件不是合法的日期格式，則會返回Invalid Date。

const date = new Date();
date.toString(); // Mon May 27 2024 09:10:33 GMT+0800 (中國標準時間)

new Date("2024/13").toString(); // Invalid Date

6. 孿生方法 toLocaleString()

有的型別的資料，支援toLocaleString()方法，返回的資料與toString()稍微有點區別：

6.1 數字型別的資料

會把數字型別的資料轉為特定語言環境表示的字串，不傳參則預設是美式英語環境。我們可以利用這個特性，把數字轉為帶千分位的數字字串。

(12345).toLocaleString(); // '12,345'
(34566789).toLocaleString(); // '34,566,789'

6.2 Date 物件的資料

將 Date 物件轉為本地格式化的字串；

new Date().toLocaleString(); // '2024/5/27 10:27:04'

7. 總結

toString()不單單是將變數轉為字串那麼簡單，不同型別的資料使用時，會有不同的效果。

歡迎關注我的公眾號：前端小茶館。

前端小

相關文章