29
23

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

+"3"+3+"3"が"63"? 意外に知られていないJavaScriptの単項プラス(+)演算子

Last updated at Posted at 2016-03-14

JavaScriptにおいて下記は文字列(string)としての「3」です。

"3"

では、下記を何を示すかご存知ですか?

+"3"

意外に知られていない+の使い方ですが、これは数値(number)としての「3」を表します。+を数値でない値の前に記述すると、数値への型変換が行われます。決してバグやハックではなく、「Unary + Operator」(単項プラス演算子)というECMAScriptの仕様の一つです(※)。文字列を数値へ変換するときに使えます。

上記2つをjsdo.itで確認できるようにしました。"3"+"3"の型をそれぞれ出力しています。
http://jsdo.it/tonkotsuboy/eJ33

※ ECMAScript® 2015 Language Specification内の「Unary + Operator

+"3"+3+"3"の結果は?

では、下記の式を考えてみましょう。

+"3"+3+"3"; 

+"3"は数値なので、上記の式は、3+3+"3";と同じ意味になります。これは、6+"3";と同じ意味となり、数値と文字列の結合により、結果は文字列の"63"となります。

動作が確認できるよう、jsdo.itにデモをアップしました。
http://jsdo.it/tonkotsuboy/WXjq

#こんなの誰が使ってるの? 見たこと無い!
そう思っていた時期が私にもありましたが、Google製の有名なフレームワーク「angular」の公式チュートリアルで使われているのを見かけました。

Angularの公式チュートリアルで使われている単項プラス演算子

Angular - Routing より

とは言えあまり直感的ではない記法なので、我々が文字列から数値への型変換をする際はNumber(3);parseInt("3", 10);を使用する方が好ましいでしょう。

JavaScript中で+が変な使われ方をしていた時は、今回の記事のことを思い出していただければ幸いです。

29
23
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
29
23

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?