JavaScript には文字列を取り扱う Stringオブジェクト が存在します。
この Stringオブジェクト は文字列リテラル（直値）を生成する場合は、単一引用符または二重引用符で囲みます。 Stringオブジェクト を直接利用することでも生成できます。 （普通使う場合には最初の方法が多いと思います。）
文字列を扱う場合にとくに多いのは文字列の連結ではないかと思います。 文字列の連結を行う演算子は「＋」を使い、これを文字列連結演算子と言うそうです。
数値の計算で使う加算用の演算子と同じものなので、変数の中身が文字列なのかそうで無いのかを注意が必要です。
■Stringオブジェクトの文字列連結について
数値データと文字列を「＋」で連結すると数値データは文字列に変換されて、連結文字列と連結されます。
以下の例では数値データの後ろから文字列を連結する場合と、前から文字列を連結する場合を示します。
結果を見れば当然、全く異なる文字列として表示されます。
さらに数値データに対して代入演算子で連結をしていますが、この場合も文字列との加算なので、 最初に数値データが文字列に変換されてから連結処理が行われます。
Stringオブジェクトの文字列連結の例
// 数値データ
var num1 = 100;
// 数値データと文字列の連結
var str1 = num1 + "123";
// 文字列と数値データの連結
var str2 = "123" + num1;
console.log("str1 = " + str1);
console.log("str2 = " + str2);
// 数値データに文字列を代入加算（連結）
num1 += str2;
console.log("num1 = " + num1);
ブラウザの開発環境のコンソールを見ると以下の様になります。（この表示はFirefoxです）
str1 = 100123 str2 = 123100 num1 = 100123100
このことは、他の言語とは処理が異なるのでハマりやすい点です。 以下によく似たことを PHP で行ってみました。
PHPの文字列連結の例
<?php
// 数値データ
$num1 = 100;
// 数値データと文字列の連結
$str1 = $num1 + "123";
// 文字列と数値データの連結
$str2 = "123" + $num1;
echo("\$str1 = " . $str1 . "<br />\n");
echo("\$str2 = " . $str2 . "<br />\n");
// 数値データに文字列を代入加算（連結）
$num1 += $str2;
echo("\$num1 = " . $num1 . "<br />\n");
// 数値として変換できないものを加算
$str1 = 1000 + "a123a";
echo("\$str1 = " . $str1 . "<br />\n");
$str1 = (int)"a123a";
echo("\$str1 = " . $str1 . "<br />\n");
?>
結果をブラウザで見ると以下の様になります。 PHP では算術演算を行う時は文字列を数値に変換して処理します。数値に変換ができなかった場合は「0」が対象の値となります。
$str1 = 223 $str2 = 223 $num1 = 323 $str1 = 1000 $str1 = 0
更に VB.NET で行ってみました。
VB.NETの文字列連結の例
Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
'// 数値データ
Dim num1 = 100
'// 数値データと文字列の連結
Dim str1 = num1 + "123"
'// 文字列と数値データの連結
Dim str2 = "123" + num1
Console.WriteLine("str1 = " & str1)
Console.WriteLine("str2 = " & str2)
'// 数値データに文字列を代入加算（連結）
num1 += str2
Console.WriteLine("num1 = " & num1)
'// 数値として変換できないものを加算
str1 = 1000 + "a123a" 'ここでエラー発生!!
Console.WriteLine("$str1 = " & str1)
str1 = CInt("a123a")
Console.WriteLine("$str1 = " & str1)
End Sub
VisualStudio の「出力」ウインドウに以下の様な表示がされ、16行目でエラーで中断します。
str1 = 223 str2 = 223 num1 = 323 型 'System.InvalidCastException' の初回例外が Microsoft.VisualBasic.dll で発生しました
※いろんな言語によって仕様が異なるのでそれぞれに合わせなければなりませんが、 JavaScript は言語としてはシバリが緩いので注意が必要です。
また、最初の変数の型宣言とは異なるものを上書きしてもOKなため、 同じ変数を別のデータ型で使うことは控えた方がいいと思います。
■Stringオブジェクトの文字列比較について
文字列同士の比較はそれぞれの文字列は Unicode 値を使用した標準的な辞書順に基づいて比較されます。
注意するのは文字列と数値を比較する場合で、特に以下の様に「等しい（==）」「等しくない（!=）」かの比較の場合です。 （「==」「!=」の書き方はC言語の場合と似た感じです。）
厳密では無い（ゆるい感じ）比較
// 等価比較
if (123 == '123') {
console.log("等しい");
} else {
console.log("等しくない");
}
// 等価比較
if ('123' == 123) {
console.log("等しい");
} else {
console.log("等しくない");
}
// 不等価比較
if (123 != '123') {
console.log("等しい");
} else {
console.log("等しくない");
}
// 等価比較
if ('123' != 123) {
console.log("等しい");
} else {
console.log("等しくない");
}
ブラウザの開発環境のコンソールを見ると以下の様になります。（この表示はFirefoxです）
この比較演算子は厳密な比較では無く、数値と文字列を比較する場合は文字列を数値に変換してから比較する様です。
等しい 等しい 等しくない 等しくない
比較式の前後のデータ型を厳密に比較する演算子を用いてみます。これはPHPと同じように「===」「!==」を使います。
厳密な比較
// 等価比較
if (123 === '123') {
console.log("等しい");
} else {
console.log("等しくない");
}
// 等価比較
if ('123' === 123) {
console.log("等しい");
} else {
console.log("等しくない");
}
// 不等価比較
if (123 !== '123') {
console.log("等しい");
} else {
console.log("等しくない");
}
// 等価比較
if ('123' !== 123) {
console.log("等しい");
} else {
console.log("等しくない");
}
ブラウザの開発環境のコンソールを見ると以下の様になります。（この表示はFirefoxです） 比較演算子の左右のデータのデータ型を含めて比較する為、全ての比較は一致しない結果になります。
等しくない 等しくない 等しい 等しい
コメント