JS 把值轉換成 String 的5個方法

時間 2019-11-16

原文原文鏈接

譯者：Jessie
原文：連接
第一次翻譯，當是鍛鍊下閱讀能力，歡迎指正~javascript

若是你訂閱了Airbnb 的 JavaScript 風格指南，就會知道最好的方法是使用 "String()" 👍html

我用他是由於它是最明確的——容易讓其餘人明白你代碼的意圖🤓java

請記住，最好的代碼並不須要多聰明的方式，而是能將你的代碼理解傳達給他人git

const value = 12345;

// Concat Empty String
value + '';

// Template Strings
`${value}`;

// JSON.stringify
JSON.stringify(value);

// toString()
value.toString();

// String()
String(value);

// RESULT
// '12345'
複製代碼

對比這 5 個方法

讓咱們用不一樣的值測試這 5 個方法，下面是咱們打算測試的值：程序員

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;
複製代碼

拼接空字符串

string + ''; // 'hello'
number + ''; // '123'
boolean + ''; // 'true'
array + ''; // '1,2,3'
object + ''; // '[object Object]'
undefinedValue + ''; // 'undefined'
nullValue + ''; // 'null'

// ⚠️
symbolValue + ''; // ❌ TypeError
複製代碼

從這裏能夠看出若是值是 symbol 這個方法會拋出一個 TypeError 錯誤，除此以外，其餘都輸出正確的值github

模板字符串

`${string}`; // 'hello'
`${number}`; // '123'
`${boolean}`; // 'true'
`${array}`; // '1,2,3'
`${object}`; // '[object Object]'
`${undefinedValue}`; // 'undefined'
`${nullValue}`; // 'null'

// ⚠️
`${symbolValue}`; // ❌ TypeError
複製代碼

實際上使用模板字符串和拼接字符串是輸出相同的結果，再者，當處理 Symbol 這也不是最理想的方式由於它會拋出一個 TypeErrorjson

TypeError: Cannot convert a Symbol value to a stringbash

類型錯誤：不能把 Symbol 類型的值轉換爲 stringfrontend

JSON.stringify()

// ⚠️
JSON.stringify(string); // '"hello"'
JSON.stringify(number); // '123'
JSON.stringify(boolean); // 'true'
JSON.stringify(array); // '[1,"2",3]'
JSON.stringify(object); // '{"one":1}'
JSON.stringify(nullValue); // 'null'
JSON.stringify(symbolValue); // undefined
JSON.stringify(undefinedValue); // undefined
複製代碼

你通常也不會使用 JSON.stringify 去把一個值轉成字符串，並且這裏真的沒有強制發生，我主要包括這種方式來完整讓你瞭解可用的全部工具，而後你根據具體狀況來挑選使用哪一種方式👍ide

有個點我要指出來由於你可能沒注意，當你使用一個純字符串格式的值轉換出來就會包裹引號

擴展閱讀 Kyle Simpson 的「You Don’t Know JS」: JSON Stringification

關於瞭解基本原理的重要性

你可能注意到個人代碼筆記常常引用 Kyle 的書，我在上面學到了不少東西，我不是來自計算機科學背景，缺少不少基本概念，他的書讓我意識到明白基本原來是多麼重要，對於那些想要成爲高級工程師的人，真正瞭解基本原理是提高水平的好方法，不然很難提升。你最終知道了問題在那裏，可是若是你知道了基本原理，就會知道爲何從而知道如何去解決，總之，強烈推薦這個系列給那些想成爲高級程序員的人！

toString()

string.toString(); // 'hello'
number.toString(); // '123'
boolean.toString(); // 'true'
array.toString(); // '1,2,3'
object.toString(); // '[object Object]'
symbolValue.toString(); // 'Symbol(123)'

// ⚠️
undefinedValue.toString(); // ❌ TypeError
nullValue.toString(); // ❌ TypeError
複製代碼

所以對比就留給了 toString 和 String, toString 也執行的不錯，必定要注意的一點就是在 undefined 和 null 下面會拋出異常。

String()

String(string); // 'hello'
String(number); // '123'
String(boolean); // 'true'
String(array); // '1,2,3'
String(object); // '[object Object]'
String(symbolValue); // 'Symbol(123)'
String(undefinedValue); // 'undefined'
String(nullValue); // 'null'
複製代碼

最後，咱們找到了冠軍🏆

能夠看到 String() 處理 undefined 和 null 很是的好，不會拋出任何異常。記住我常常說的，你最瞭解你的程序，所以你應該選擇最適合你的方式。