【JavaScript入門】toStringで数値を文字列に変換(日付/基数変換)

どうもこんにちは!エンジニアの若月です。

今回は、JavaScriptのtoStringメソッドについて、基本的な使い方から、少し特殊な場面でのより実用的な使い方まで、詳しく紹介したいと思います。

この記事で解説する内容は、

・toStringメソッドとは
・toStringメソッドの使い方

などの基本的な内容から、

・日付を文字列に変換する
・配列(Array)を文字列に変換する方法
・JSONオブジェクトを文字列に変換する方法
・数値を基数変換して文字列に変換する

など、toStringメソッドの応用的な使い方まで、わかりやすく解説していきます!

toStringメソッドとは

toStringメソッドとは、「to(〜へ) + String(文字列)」、つまり「文字列へ変換」するときに使われるメソッドです。

JavaScriptでは、あらゆる値が数値、文字列、配列などのデータ型に分かれています。

toStringメソッドは、文字列でないものを文字列に変換するときに使われるメソッドです。

toStringメソッドの使い方

数値の桁数を取得する方法

10000000000000のような、大きな数字の桁数を取得したいとき、文字列であればlengthメソッドで桁数を取得できますが、これは文字列のために用意されたメソッドのため、数値に対しては使えません。

実行結果:

そこで、いったん数値を文字列に変換することで、文字数を取得できます。

定義したnumのあとに「.toString()」を追加しましょう。

実行結果:

このように、数字などの文字列でないものを文字列に変換するときにtoStringメソッドを使います。

数値以外にも、日付(Date)配列(Array)オブジェクト=連想配列(Object)なども、文字列に変換することができます。

日付を文字列に変換する方法

日付(Dateオブジェクト)から文字列への変換も、数値の変換と同様にtoStringメソッドが利用できます。

実行結果:

日付は古いバージョンのInternet Explorerなどで異なる出力結果が表示されることがありますので注意しましょう。

また、ISO規格のフォーマットで出力するためのtoISOStringメソッドも用意されています。

配列(Array)を文字列に変換する方法

配列(Array)も文字列に変換して出力できます。

実行結果:

toStringメソッドで出力されるのは文字列なので、もちろん他の文字列と足すことも可能です。

JSONオブジェクトを文字列に変換する方法

ここでは、JSONオブジェクトを文字列に変換する方法を解説します。

それでは、JSONオブジェクトも同様に文字列で出力してみましょう。

実行結果:

文字列では表示されたものの、これだとObjectの中身が何かわかりません。Objectの中身を表示するためにはtoStringメソッドではなく、JSON.stringifyメソッドを使います。

実行結果:

JSON.stringifyメソッドを使うことで、中身を展開(パース)した文字列を取得できます。

数値を基数変換して文字列に変換する方法

数値を文字列に変換する際に、基数変換を同時に行うこともできます。

実行結果:

このように、数値に対するtoStringメソッドのときは、引数を指定することで基数変換を同時に行えます。

まとめ

いかがでしたか?この記事では、JavaScriptのtoStringメソッドの様々な使い方について解説しました。

今回の記事のポイントは以下の通りです。

・num.toString()のようにして文字列でないものを文字列に変換できる
・日付の変換にはtoISOStringも使える
・Objectを文字列にするときにはJSON.stringifyメソッドを使う
・数値に対しては引数を指定して基数変換もできる

toStringメソッドは、様々な値を文字列として扱いたいときによく使う基本的なメソッドなので、しっかりと理解しておきましょう!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

ワカツキ ヒロアキ

ワカツキ ヒロアキ

目黒のベンチャー企業ででフルスタックエンジニアをやっています!今はWEB・スマホアプリ開発をメインに、毎日、仕事+アウトプットを目標に日々過ごしています。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説