In 'n' Out

値の扱い方を変える

JavaScriptでは、同じ10という見た目の値でも、数値として扱われるか、文字列として扱われるかによって、動作が変わります。
このように、値がどのような性質を持っているかを示す考え方を型と呼びます。
これまでのコードでも、計算ができたり、文字として連結されたりと、型によって処理の結果が変わってきました。
型変換は、その値の性質を意図的に切り替え、正しく処理を行うための仕組みです。
ここでは、入力された値を例に、型変換の必要性と基本的な使い方を整理します。

文字を入力する

alertはメッセージを表示するだけですが、promptを使うとユーザーに文字を入力してもらうことができます。
入力された値は、その後の処理に利用できます。

構文

prompt('入力された文字');

promptは、画面に入力欄付きのダイアログを表示します。
引数に指定した文字列は、入力欄の上に表示される説明文になります。
ユーザーが入力した内容は、promptの結果として扱われます。

コード例

//prompt1.js
let text = prompt('文字を入力してください');

alert(text);

動作例

この例では、promptで入力された文字を変数textに代入しています。
その後、alertを使って、入力された内容をそのまま表示しています。
このように、promptは表示するだけではなく、入力された値を受け取るために使います。
promptで入力された値は、すべて文字列として扱われます。
見た目が数値であっても、内部的には文字として処理されます。
そのため、計算などを行う場合は、あとから型変換が必要になります。

文字列変換

JavaScriptでは、数値や計算結果を「文字として扱いたい」場面があります。
そのままでは数値として処理される値も、文字列に変換することで表示用のデータとして扱いやすくなります。

構文

String(値)

String()は、指定した値を文字列に変換するための関数です。
数値や計算結果を渡すことで、文字として扱える形に変換されます。

コード例

//convertString1.js
let num = 10;
let result = String(num);

alert(result);

動作例

この例では、数値10をString()に渡して文字列に変換しています。
alertで表示されている見た目は数値の10と同じですが、内部的には文字列として扱われています。
文字列に変換することで、計算ではなく表示目的のデータとして使いやすくなります。
特に、あとで文章と結合したり、入力内容をそのまま表示したい場合に有効です。

コード例

//convertString2.js
let input = prompt('数値を入力してください');

alert(String(input));

動作例

promptで入力された値は、最初から文字列として扱われます。
そのため、promptの入力結果をそのままString()で変換しても見た目は変わりません。 しかし、すでに文字列の場合でもString()を使って書いておくことで、ここで文字列として扱っているという意図を明確にできます。

数値変換

promptで入力した値は、見た目が数値でも文字列として扱われます。
そのまま計算に使うと、意図しない結果になることがあります。
Number()を使うことで、文字列として入力された値を数値に変換できます。

構文

Number(値)

Number()は、指定した値を数値に変換するための関数です。
文字列として扱われている数値を、計算可能な数値に変換します。
ただし、全角数字は数値として扱われない点に注意しましょう。

コード例

//convertNumber1.js
let input = prompt('数値を入力してください');
let num = Number(input);

alert(num + 5);

動作例

この例では、promptで入力した値をNumber()で数値に変換しています。
変換後は数値として扱われるため、+5の計算が正しく行われます。
もしNumber()を使わずにそのまま計算すると、文字列の結合として処理されます。

コード例

//convertNumber2.js
let input = prompt('数値を入力してください');

alert(input + 5);

動作例

入力が10なら105と表示されます。
これは、文字列同士が結合されているためです。
また、Number()は数字として入力されることが前提ですので、数値として解釈できない文字列を変換すると、計算に使えない値になります。

整数変換

Number()は文字列全体を数値に変換しますが、入力内容によっては使いづらい場面もあります。
parseInt()は、文字列の先頭から数値として読み取れる部分だけを整数に変換します。
入力値に文字が含まれる可能性がある場合に有効です。

構文

parseInt(値)

parseInt()は、指定した値を整数に変換する関数です。
文字列の先頭から数値として解釈できる部分までを読み取り、整数として返します。
ただし、Numberと同じく全角数字は数値として扱われない点に注意しましょう。

コード例

//convertParseInt1.js
let input = prompt('数値を入力してください');
let num = parseInt(input);

alert(num + 5);

動作例

この例では、promptで入力した値をparseInt()で整数に変換しています。
入力が10であれば、数値の10として扱われ、結果は15になります。
Number()と何が違うのでしょうか？
次のコード例を見てください。

コード例

//convertParseInt2.js
let input = prompt('数値を入力してください');

alert(Number(input));
alert(parseInt(input));

動作例

入力が10pxや、10個などの場合、動作は次のようになります。
Number()は、文字列全体を数値に変換しようとするため、正しく扱えません。
一方、parseInt()は先頭の数値部分である10だけを読み取り、整数に変換します。
また、小数点を含む場合は小数点以下を切り捨ててしまうため、parseIntは適していません。
しかし、どうしても小数点を扱わざるを得ないこともあります。
その場合は次のparseFloatを使います。

小数変換

parseFloat()は、文字列の先頭から数値として読み取れる部分を、小数を含めて変換します。
小数点を含む入力値を扱いたい場合に使用します。

構文

parseFloat(値)

parseFloat()は、指定した値を小数として変換する関数です。
文字列の先頭から数値として解釈できる部分を読み取り、小数点以下も含めて変換します。
parseFloatも全角数字は数値として扱われない点に注意しましょう。

コード例

//convertParseFloat1.js
let input = prompt('数値を入力してください');
let num = parseFloat(input);

alert(num + 0.5);

動作例

この例では、promptで入力した値をparseFloat()で数値に変換しています。
入力が12.3であれば、小数を含んだ数値として扱われ、結果は12.8になります。

コード例

//convertParseFloat2.js
let input = prompt('数値を入力してください');

alert(parseFloat(input));

動作例

入力が10.5pxなどの場合、動作は次のようになります。
先頭の数値部分である10.5だけを読み取り、小数に変換します。
なお、小数点に変換するから10を10.0のように入力する必要はありません。

ここまで、promptで入力された値は、型変換で数値として扱えるようになることを解説しました。 しかし、全角数字や想定外の文字が含まれる場合、型変換だけでは対応できません。 そこで登場するのが、入力内容を柔軟に判定・整形できる正規表現です。