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

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

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

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

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

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

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

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

toStringメソッドとは

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

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

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

toStringメソッドの使い方

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

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

const num = 10000000000000; //この桁数を知りたい
console.log(num.length);

実行結果:

> undefiened

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

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

const num = 10000000000000; //この桁数を知りたい
const digits = num.toString().length; // .toString()を追加
console.log(digits + "桁でした");

実行結果:

> "14桁でした"

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

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

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

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

const date = new Date(); // 今日の日付
console.log("今日:" + date.toString());
console.log("今日:" + date.toISOString());

実行結果:

> "今日:Tue Apr 10 2018 00:00:00 GMT+0900 (JST)"
> "今日:2018-04-09T15:00:00.000Z" // ISO形式

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

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

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

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

const array = ["りんご","みかん","メロン","もも","バナナ"]
console.log("好きなフルーツは、" + array.toString());

実行結果:

> "好きなフルーツは、りんご,みかん,メロン,もも,バナナ"

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

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

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

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

const obj = new Object({name: "Taro", age: 26, gender: "male"});
const str_obj = obj.toString();
console.log(str_obj);

実行結果:

> [object Object]

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

const obj = new Object({name: "Taro", age: 26, gender: "male"});
const str_obj = JSON.stringify(obj);
console.log(str_obj);

実行結果:

> {"name":"Taro","age":26,"gender":"male"}

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

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

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

const num = 10;
const bin_converted = num.toString(2);
const hex_converted = num.toString(16);

console.log("10を2進数で表すと、" + bin_converted);
console.log("10を16進数で表すと、" + hex_converted);

実行結果:

> "10を2進数で表すと、1010"
> "10を16進数で表すと、a"

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

まとめ

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

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

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

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

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

ワカツキ ヒロアキ

ワカツキ ヒロアキ

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

おすすめコンテンツ

いまならレッスン期間が2週間延長!この秋、プログラミングを学ぼう

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー