文字列を数値に変換する処理はこちらの記事を参照してください。
JavaScriptで数値を明示的に文字列に変換するコードを紹介します。
JavaScriptで数値を明示的に文字列に変換する場合には以下の方法があります。
String 関数を利用する
toString メソッドを利用する
toFixed メソッドを利用する
String(変換する数値)
以下のHTMLを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function TestFunc() {
var a = 100.5;
var b = 200;
var c = "Penguin";
var d = "Duck";
var ab = a + b;
var ac = a + c;
var cd = c + d;
var sasb = String(a) + String(b);
var sab = String(a) + b;
document.forms.form1.text1.value = ab;
document.forms.form1.text2.value = ac;
document.forms.form1.text3.value = cd;
document.forms.form1.text4.value = sasb;
document.forms.form1.text5.value = sab;
}
</script>
</head>
<body>
<form id="form1">
<button type="button" onclick="TestFunc();">Exec</button><br />
<input id="text1" type="text" /><br />
<input id="text2" type="text" /><br />
<input id="text3" type="text" /><br />
<input id="text4" type="text" /><br />
<input id="text5" type="text" /><br />
</form>
</body>
</html>
a,b,c,d 4つの変数を宣言します。a,b には数値の値を代入します。c,d には文字列の値を代入します。
var a = 100.5;
var b = 200;
var c = "Penguin";
var d = "Duck";
変数aとbの和を変数abに代入しています。
var ab = a + b;
変数aとcの和を変数acに代入しています。
var ac = a + c;
変数cとdの和を変数cdに代入しています。文字列同士の和となるため、文字列の結合処理になります。
var cd = c + d;
変数aとbをString関数で文字列に変換後の和を変数sasbに代入しています。
var sasb = String(a) + String(b);
変数aのみをString関数で文字列に変換後のbとの和を変数sabに代入しています。
var sab = String(a) + b;
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
ページ内の[Exec]ボタンをクリックします。テキストボックスに下図の値が表示されます。
var ab = a + b; の結果はそれぞれの値が数値として計算されたため、合計値の300がテキストボックスに表示されています。var ac = a + c; の結果は、変数cが文字列のため、変数aの値も文字列として処理され文字列が連結された結果となり 100Penguin の値が表示されます。var cd = c + d; はそれぞれが文字列の値のため、文字列が連結されたPneguinDuckの文字列が表示されます。var sasb = String(a) + String(b); はそれぞれが文字列に変換されるため、文字列が連結された結果である 100200が表示されます。var sab = String(a) + b; は変数aのみが文字列に変換されますが、片方が文字列となるため、変数bも文字列として扱われ、2番目のテキストボックスと同様の処理になり、文字列が連結された結果である 100200が表示されます。
String() 関数を利用して数値を明示的に文字列に変換できました。
(変数).toString()
または
(変数).toString([変換する進数の数])
以下のコードを記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function TestFunc() {
var a = 100.5;
var b = 200;
var c = "Penguin";
var d = "Duck";
var ab = a + b;
var ac = a + c;
var cd = c + d;
var sasb = a.toString() + b.toString();
var sab = a.toString() + b;
document.forms.form1.text1.value = ab;
document.forms.form1.text2.value = ac;
document.forms.form1.text3.value = cd;
document.forms.form1.text4.value = sasb;
document.forms.form1.text5.value = sab;
}
</script>
</head>
<body>
<form id="form1">
<button type="button" onclick="TestFunc();">Exec</button><br />
<input id="text1" type="text" /><br />
<input id="text2" type="text" /><br />
<input id="text3" type="text" /><br />
<input id="text4" type="text" /><br />
<input id="text5" type="text" /><br />
</form>
</body>
</html>
コードの大部分は先のString関数と同様の処理です。変換部分が (変数名).toString() の書式でtoStringメソッドを呼び出す記述になっています。
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
ページ内の[Exec]ボタンをクリックします。テキストボックスに下図の値が表示されます。
4番目と5番目のテキストボックスの値は文字列に変換してから結合しているため、文字列の結合結果になります。
(変数).toFixed()
または
(変数).toFixed([小数点以下の桁数])
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function TestFunc() {
var a = 100.5;
var b = 200;
var c = "Penguin";
var d = "Duck";
var ab = a + b;
var ac = a + c;
var cd = c + d;
var sasb = a.toFixed() + b.toFixed();
var sab = a.toFixed() + b;
document.forms.form1.text1.value = ab;
document.forms.form1.text2.value = ac;
document.forms.form1.text3.value = cd;
document.forms.form1.text4.value = sasb;
document.forms.form1.text5.value = sab;
}
</script>
</head>
<body>
<form id="form1">
<button type="button" onclick="TestFunc();">Exec</button><br />
<input id="text1" type="text" /><br />
<input id="text2" type="text" /><br />
<input id="text3" type="text" /><br />
<input id="text4" type="text" /><br />
<input id="text5" type="text" /><br />
</form>
</body>
</html>
コードの大部分は先のString関数と同様の処理です。変換部分が (変数名).toString() の書式でtoStringメソッドを呼び出す記述になっています。
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
ページ内の[Exec]ボタンをクリックします。テキストボックスに下図の値が表示されます。
4番目と5番目のテキストボックスの値は文字列に変換してから結合しているため、文字列の結合結果になります。
上記のコードの以下の部分は変数aが数値ですが、変数cが文字列であるため、aとcの和を取ると、aは文字列として処理され結果は100.5Penguinとなります。
aは暗黙で文字列型に変換される動作となります。
var a = 100.5;
var c = "Penguin";
var ac = a + c;
上記の仕組みを利用して、以下のコードで文字列の値にできます。
暗黙の変換処理を利用するため、コードの可読性は若干落ちます。
var a = 100.5;
var a_str = a + '';
