文字列と数値
JavaScriptでは変数の宣言で型を指定する必要が無いし、必要なときは自動的に型変換をしてくれるので便利なのですが、文字列の数字を扱うときだけは要注意です。
型についてはこちらデータの型
問題
これは前頁のテキスト操作メソッドを使ったExpressionです。
- 1行目でレイヤー名[cut5]から最後の文字[5]を取り出して変数aに代入。
- 2行目で変数aに5をかけています。
- 5*5 だから不透明度は[25] になっています。全然問題ないですね。
- さて、ここで2行目の乗算[ * ]を加算[ + ]に変更してみます。すると
- 5+5 だから[10]になるはずなのにそうなっていません。
- なぜ結果が[55]になるのでしょうか?(バグじゃないよ!)
ヒント
次のExpressionを見てください。
[+]演算子には2つの機能があります。加算と連結です。
- 上段は数値の[1]と[2]を加算しています。よって結果は[3]です。
- 下段は文字の[1]と[2]を連結しています。よって結果は[12]です。
答え
問題の [a+5]は文字の連結をしたので結果が[55]になったのです。
- [+]演算子の前後に文字列と数値があった場合、文字列が優先され、連結されます。
- 重要なのは、1行目のメソッドsubstr( )の戻り値のデータ型が数値ではなくて、文字列であるということです。
- 文字列に続く[+]演算子は連結の機能が働くので、後の数字を自動的に文字列に変換してつなげたのです。
- 文字列を引用符・クォート(' '/" ")で囲って扱っている時はデータ型を間違えることは無いと思いますが、文字列を代入した変数や、メソッドの戻り値を使う場合にはこのようなミスを起こしやすいので注意してください。
数字を数値として扱えないの?
- 文字列の数字を計算に使えないのでは不便です。当然JavaScriptにはデータの型を変換するメソッドが用意されています。
parseInt() | 文字列の先頭の数字を数値型に変換。整数のみ 例:parseInt("3.5+12") 結果:3 |
---|---|
parseFloat() | parseInt()と同じですが、整数と浮動小数点の両方 例:parseFloat("3.5+12") 結果:3.5 |
Number() | コンストラクターを関数として使用。 10進数のみ。数字以外の文字が接続していると使用不可。 |
- この変換を使った結果が下図です。[a+5]の結果が[10]になっています。
最初のExpressionで[a*5]はなぜエラーにならないの?
- substr( )の戻り値が文字列なら[文字列*数値]なんておかしい。なぜエラーにならないの?
- JavaScriptでは数値が必要とされる所に文字列を使うと自動的に数値に変換されます。上の例では「乗算をするんだからこれは数値だな」って判断して、変数aの型を数値型に変換し、そして乗算してくれていたわけです。
- 「ヒント」のExpressionの結果[12]は文字列ですが、「不透明度なんだから数値だな」って変換してくれているのでエラーになっていないのです。
- JavaScriptはデータ型については非常に懐の深い言語ですね。
- でもエラーにならないからといってこの機能に頼りきっていてはまずいですよ!意識的に型変換をするようにしましょう。
- ところで型の問題以前に全角と半角を間違えたりしてないよね。(笑)
文字列があるのに加算される場合も!
次の2つの例を見てください。
- 例A:2+3+"cut" 結果は "5cut"
- 例B:"cut"+2+3 結果は "cut23"
- 文字列と数値が混在していても例Aでは加算され、例Bでは連結されています。
- これは実行順序の問題で、[+]演算子は左から右へ適用されるのでこのような結果になるのです。つまり次のようにカッコを使ったのと同じ意味なのです。
- (2+3)+"cut"
- ("cut"+2)+3
さらに詳しく
- この他に、数値から文字列への変換メソッドなどもあります。
- 詳しくはこちらを見てください。データの型