4.3 「0」をつけて桁数を合わせる　《数字を文字列に変換》　【JavaScript超入門】

JavaScriptの学習メモ。

今日は『確かな力が身につくJavaScript「超」入門』の第４章を読んでみます。

jsstudy.hatenablog.com

4.3 型変換（キャスト）
- サンプルコード
- 実行結果
型変換（キャスト）
まとめ

4.3 型変換（キャスト）

(p.169)

表示させるデータの文字数を合わせたり、ファイルの並び順を揃えたりするのに、1桁の数字の前に0をつけて桁を揃えることがよくあります。

具体的には「1」「2」という数字をそれぞれ「01」「02」にする処理です。

どうすればこの機能を実現できるか、考えながら進めましょう。

サンプルコード

以下の内容を「index.html」というファイル名で保存します。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>4-03_digit</title>
</head>
<body>
    <h1>「0」をつけて桁数を合わせる</h1>
    <h2>曲目リストに番号をつける</h2>
    <section>
        <h2>Standards Revival MP3</h2>
        <div id="list">
        </div>
    </section>
    <script>
        var addZero = function (num, digit) {
            var numString = String(num);
            while (numString.length < digit) {
                numString = '0' + numString;
            }
            return numString;
        }
        var songs = [
            'Linear Motor Girl',
            'Computer City',
            'Electro World',
            'Chocolate Disco',
            'Twinkle Snow Powdery Snow',
            'Polyrhythm',
            'Seventh Heaven',
            'Baby cruising Love',
            'Love the world',
            'Dream Fighter'
        ];
        for (var i = 0; i < songs.length; i++) {
            var paragraph = document.createElement('p');
            paragraph.textContent = addZero(i + 1, 2) + '. ' + songs[i];
            document.getElementById('list').appendChild(paragraph);
        }
    </script>
</body>
</html>

実行結果

上記のHTMLファイルをブラウザーで開きます。

f:id:jsstudy:20170510000829p:plain

数字がゼロ詰めになり、「01」「02」…のような表記になりました。

型変換（キャスト）

データの型を変えることを「型変換」（キャスト）といいます。

型変換 - Wikipedia

型変換（かたへんかん）とはプログラムにおいて、あるデータ型を他のデータ型に変換することである。

JavaScriptでは、

コンストラクタ関数
専用の関数、メソッド

を使うことで、データの型変換ができます。

jsstudy.hatenablog.com

文字列 → 数値

var value = '1234';

// 以下、1234
Number(value);
parseInt(value,10);

数値 → 文字列

var value = 1234

// 以下、'1234'
String(value);
value.toString();
value + '';

サンプルコードを見てみます。

var numString = String(num);

String()は、文字列型のデータを作るコンストラクタ関数です。

String()を使って、数値から文字列を作り出しています。

(p.177)

文字列データとStringオブジェクト

JavaScriptには「Stringオブジェクト」という、文字列データを扱うためのオブジェクトがあります。

もちろん、Stringオブジェクトはメソッドとプロパティを持っていて、lengthプロパティはそのうちのひとつです。

また、この実習ではString()を使って、数値データを文字列データに変換しました。

このString()は、()内に含まれる数値などのデータを文字列データに変換し、Stringオブジェクトのメソッドやプロパティを使えるようにするためのものです。