Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
24
Help us understand the problem. What is going on with this article?
@tonkotsuboy_com

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

More than 1 year has passed since last update.

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中で+が変な使われ方をしていた時は、今回の記事のことを思い出していただければ幸いです。

24
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
tonkotsuboy_com
フロントエンド / 九州大学卒 / ウェブ制作 / JavaScriptコードレシピ集の著者 / CSS Nite 2017〜2019ベストセッション / TechFeed公認エキスパート /お仕事依頼はDMまで

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
24
Help us understand the problem. What is going on with this article?