1. 程式人生 > >JS中將變數轉為字串

JS中將變數轉為字串

譯者按: 語言的細枝末節瞭解一下就可以了,不需要太較真,不過如果一點也不知道的話,那就不太妙了。

為了保證可讀性,本文采用意譯而非直譯。另外,本文版權歸原作者所有,翻譯僅用於學習。

對於JavaScript,有3種不同方法可以將變數轉換為字串。這篇部落格將詳細介紹這些方法,並比較他們的優劣。

3種方法

將變數轉換為字串的3種方法如下:

  1. value.toString()
  2. "" + value
  3. String(value)

value

null或者undefined時,第1種方法就不行了。而方法2和方法3基本上是一樣的。

  • ""+value: 將value空字串相加,即可將其轉換為字串。這種方法其實是一種稍微晦澀的技巧,可能會讓別人難於理解開發者的意圖。不過,這一點見仁見智,有些人偏愛這種方法。

  • String(value): 這種方法非常清晰:使用String()函式將value轉換為字串。不過,String()有兩種不同用法,容易混淆,尤其對於Java開發者來說。當String()和運算子new一起作為建構函式使用時,它返回一個新建立的String物件;當不用new運算子呼叫String()時,它只把value
    轉換成原始的字串。這兩者是非常不同的:
> String("Fundebug") === new String("Fundebug")
false

> typeof String("Fundebug")
'string'
> String("Fundebug") instanceof String
false

> typeof new String("Fundebug")
'object'
> new String("Fundebug") instanceof String
true

事實上,將String()作為建構函式使用並不常見,因此僅使用它來轉換字串就好了。

""+value與String(value)的細微差別

""+valueString(value)都可以將value轉換為字串,它們是如何做到的呢?事實上,它們雖然結果相同,但是方法稍有區別。

將primitive基本型別轉換為字串

兩種方法都使用內部函式ToString()primitive基本型別轉換為字串。ToString()函式在ECMAScript 5.1 (§9.8)中定義了,但是並不能直接使用,因此稱作內部函式。下面的表格顯示了ToString()函式如何將primitive基本型別轉換為字串:

引數 結果
undefined "undefined"
null "null"
Boolean "true"或者 "false"
Number 將數字轉換為字串,例如: "1.765"
String 無需轉換

將Object轉換為字串

轉換為字串之前,兩種方法都會先將Object轉換為primitive。不同的是,""+value使用內部函式ToPrimitive(Number)(除了date型別),而String(value)使用內部函式ToPrimitive(String)

  • ToPrimitive(Number): 先呼叫obj.valueOf,若結果為primitive則返回;否則再呼叫obj.toString(),若結果為primitive則返回;否則返回TypeError
  • ToPrimitive(String): 與ToPrimitive(Number)類似,只是先呼叫obj.toString(),後呼叫obj.valueOf()

可以通過以下示例瞭解區別,obj如下:

var obj = {
    valueOf: function()
    {
        console.log("valueOf");
        return {};
    },
    toString: function()
    {
        console.log("toString");
        return {};
    }
};

呼叫結果:

> "" + obj
valueOf
toString
TypeError: Cannot convert object to primitive value

> String(obj)
toString
valueOf
TypeError: Cannot convert object to primitive value

它們的結果相同

""+valueString(value)雖然不同,但是我們很少能感覺到。因為,大多數object使用預設的valueOf(),它返回物件本身:

> var x = {}
> x.valueOf() === x
true

由於valueOf()返回值並非primitive,因此ToPrimitive(Number)會跳過valueOf(),而返回toString()的返回值。這樣,與ToPrimitive(String)的返回值就一樣了。

objectBooleanNumber或者String例項時,valueOf()將返回primitive。這就意味著兩者的計算過程是這樣的:

  • ToPrimitive(Number):valueOf()返回primitive值,然後使用ToString()轉換為字串。
  • ToPrimitive(String): toString()通過ToString()函式將primitive值轉換為字串。

可知,雖然計算過程不同,但是它們的結果是一樣的。

結論

那麼你該選擇哪種方法呢?如果你可以確保value值不是nullundefined,那麼不妨使用value.toString()。否則,你只能使用""+valueString(value),它們基本上是一樣的。

參考

  1. JavaScript values: not everything is an object
  2. What is {} + {} in JavaScript?
  3. String concatenation in JavaScript
  4. JavaScript String 物件

關於fundebug

Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線,Fundebug累計處理了7億+錯誤事件,得到了Google、360、金山軟體、百姓網等眾多知名使用者的認可。歡迎免費試用!

JS中將變數轉為字串

版權宣告

轉載時請註明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/09/18/value-to-string/