・カンマや小数点がある数値を変換する方法がわからない･･･。
・オブジェクトや配列を文字列に変換することもできる？
JavaScriptの文字列の変換がややこしくてわからない、と勉強につまづいていませんか？
わからないままにしておくと、なかなか作業が進みませんよね。
そこでこの記事では、JavaScriptでよく使われる文字列の変換方法を徹底解説します！
この記事を読めば、JavaScritpの文字列をあらゆる型に変換できるスキルが身につくでしょう。
文字列を変換できなくてエラーばかり出る、簡単に変換させたい！という方は、ぜひご覧ください。
目次 [非表示]
JavaScriptの文字列↔︎数値を変換する方法
JavaScriptでは、数値変換をすることがよくあります。
例えば、「文字列→数値」に変換する場合や「数値→文字列」に変換する場合などです。
ここではそれぞれの変換方法について解説していきます。
文字列→数値に変換
まずは「文字列→数値」に変換する方法を見ていきましょう。
数値に変換する方法はString型をNumberオブジェクトの引数にすることです。
実際のコードは次のようになります。
①文字列の「’1234’」を「string」に代入。
②そして「string」を引数の「Number()」に代入します。
結果を出力すると、以下のようになります。
「1234」が数値として出力されていますね。
また「typeof」を使って型を調べると、「number」という数値型になっていることがわかります。
例えば、よくあるのが「123px」のようなもの。
先ほどと同じようにコードを書いて出力してみると、「NaN（Not-a-number）」と表示されてしまいます。
数値として変換できていないのがわかりますね。
しかし、これを数値として変換したい･･･。
そんなときは「parseInt()」を使うことができます。
「Number()」だった部分を「parseInt()」に変えて入力します。
これで出力すれば次のように表示されるはずです。
「px」の部分は省略され、「123」の文字列を数値に変換できていますね。
型も数値型の「number」になっているのがわかります。
数値→文字列に変換
今度は逆に「数値→文字列」に変換する方法を見ていきましょう。
文字列に変換する方法はNumber型をStringオブジェクトの引数にすることです。
実際のコードは次のようになります。
①数値の「1234」を「number」に代入。
②「number」を引数の「String()」に代入します。
結果を出力すると、以下のようになります。
数値の「1234」が文字列として表示されました。
また文字列型の「string」に変換されているのがわかりますね。
「数値→文字列」に変換する方法でもう1つ、「toString()」を使う方法もあります。
①数値「1234」を「number」に代入。
②変数の「number」を（.）で「toString()」メソッドと連結させ、文字列に変換します。
結果は先ほどと同じものが表示されていますね。
数値をカンマ区切りに変換する方法
JavaScriptではカンマ区切りを変換させることも多いです。
普通の数値にカンマ区切りの数値に変換したり、またその逆に変換したりします。
普通の数値→カンマ区切りの数値に変換
まずは「普通の数値→カンマ区切りの数値」に変換する方法を見ていきましょう。
ここでは「toLocaleString()」メソッドを使います。
①数値の「123456」を「number」に代入。
②そして「number」を（.）で「toLocaleString()」メソッドと連結させます。
結果を出力すると、以下のようになります。
このように表示されればOKです。
「123,456」と3桁区切りに変換されましたね。
カンマ区切りの数値→普通の数値に変換
今度は「カンマ区切りの数値→普通の数値」に変換する方法を見ていきましょう。
カンマを取り除くには、「Number」の「replace()」メソッドを使用します。
①カンマで区切られた数値の「123,456」を「string」に代入。
②そして引数の「Number()」に「string」を代入し、「replace()」メソッドと連結させる。
※「replace(/,/,”)」でカンマを削除。
結果を出力すると、以下のようになります。
カンマが削除され、「123456」と表示されました。
また「Number()」ではなく「parseInt()」を使うことも可能です。
結果は先ほどと同じ数値が表示されます。
なのでどちらを使っても良いでしょう。
小数点の桁数を変換する方法
JavaScriptでは小数点の桁数を変換することもあるでしょう。
なのでここでは、小数点の桁数を変換する方法を解説します。
小数点を変換するには「toFixed()」メソッドを使うことが可能です。
①小数点を含む「123.45678」を「number」に代入。
②そして「toFixed()」メソッドを用いて出力します。
()内に数字を入れると、その桁数分の数字が表示されます。
ご覧の通り「toFixed()」の方は「123」と表示され、小数点以下は省略されました。
一方「toFixed(2)」の方は「123.46」と、小数点から2桁までの数字が表示されます。
このように表示したい桁数を調整できるので、覚えておくといいでしょう。
JavaScriptの文字列↔︎日付を変換する方法
JavaScriptでは文字列から日付のオブジェクトを作ったり、逆に日付のオブジェクトから文字列を生成したりすることが多いです。
なのでここでは、「文字列↔︎日付」を変換する方法を解説します。
文字列→日付に変換
まずは「文字列→日付」に変換する方法です。
実際のコードは次のようになります。
①Dateオブジェクトのコンストラクトを使い、日付を指定します。
そして、変数の「date」に代入。
そして、時、分、秒は【:】（コロン）で区切ってください。
②「date」を「toString()」メソッドと連結。
結果を出力すると、以下のようになります。
曜日を含めた年月日、時分秒まで表示されましたね。
日付→文字列に変換
今度は「日付→文字列」に変換する方法を見ていきましょう。
コードは以下のようになります。
①まずは「new Date()」で日付を取得し、「date」に代入します。
②関数の「getStringFromDate(date)」を「result」に代入。
③「result」を出力。
④日付から文字列に変換するための関数を生成。
日付から文字列に変換できれば、次のように表示されるはずです。
きちんと日付が出力されましたね。
日付の変換はよく使われるので、覚えておきましょう。
JavaScriptの文字列↔︎配列を変換する方法
JavaScriptで「文字列→配列」に変換したい、もしくは「配列→文字列」に変換したいときもあるでしょう。
ここでは「文字列↔︎配列」を変換する方法を解説します。
文字列→配列に変換
まずは「文字列→配列」に変換する方法を見ていきましょう。
文字列は「split()」メソッドを使って配列に分配することができます。
具体的なコードは次の通り。
①文字列を「string」に代入。
②「split()」メソッドを使い、コンマ区切り(‘,’)で配列に分配。
結果を出力すると、以下のようになります。
文字列がそれぞれコンマで区切られ、配列に変換されていますね。
配列→文字列に変換
今度は「配列→文字列」に変換してみましょう。
実際のコードは次のようになります。
①配列を「array」に代入。
②「toString」メソッドを使い、文字列に変換する。
結果を出力すると、以下のようになります。
配列が文字列に変換されたのがわかりますね。
「文字列↔︎配列」の変換もよく使われるので、覚えておくといいでしょう。
まとめ
今回はJavaScriptの文字列を変換する方法を解説しました。
文字列と数値の変換はフォーム入力の際によく使われるので、しっかり理解を深めておきましょう。
また、その他のカンマ区切りや小数点、配列などを変換する場面もありますので、知っておくと便利です。
今回の記事がJavaScriptの学習、作業の役に立てると幸いです。
