読者です 読者をやめる 読者になる 読者になる

JavaScript勉強会

JavaScriptの学習日記

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

JavaScriptの学習メモ。

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

 

jsstudy.hatenablog.com

 

 

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オブジェクトのメソッドやプロパティを使えるようにするためのものです。

 

まとめ

  • データの型(数値型や文字列型など)を別の型に変える操作を「型変換」(キャスト)という。
  • JavaScriptの型変換は、コンストラクタ関数や、専用の関数を使えばOK。
  • 型変換を使うと、「数値」を「文字」として扱うことができる。

 

「1」「2」などの数字を文字として扱い、「01」「02」みたいに加工したいとき、型変換を活用します。

いろいろな型変換のやり方を練習して、データの取り扱いに慣れたいです。