第5話:文字列変数と様々な出力

第1部 JavaScriptプログラミングの基本

目次

マンガ










マンガ台詞

【1Page】
先生:前回は 数値変数について教えた
    実は変数には 『文字列変数』もある
遊:文字『列』?
麗:先生 『列』って 何ですか?
先生:『文字列』というのは 文字が列のように 並んだものだ
先生:『文字列変数』に 入っている文字は 1文字の場合もあれば 何文字かの場合もある
    この『文字列変数』は そういった文字を書いた 付箋のようなものだ
        var a = "遊";
        var b = "成績";
        :
【2Page】
守:変数『a』に 『遊』という 1つの文字が
    変数『b』に 『成績』という 複数の文字が
    入っているんですか?
先生:そうだ
    この『文字列変数』は 数値変数のように 足し算ができる
        var a = "遊";
        var b = "の";
        var c = "成績";
        var d = "は";
        var e = "低い";
        var ketugou = a + b + c + d + e;
        alert(ketugou);
    遊の成績は低い
遊:うぐう
麗:先生 もう少し意味のある 文章を作ってください
遊:私の成績は 意味がないと 言うの!
【3Page】
先生:『文字列変数』の 足し算には 数値も含められるぞ
        var teihen = 20;    // 底辺
        var takasa = 10;    // 高さ
        var menseki = teihen * takasa / 2;    // 面積
        var ketugou = "底辺" + teihen + "、高さ" + takasa
                + "の、三角形の面積は" + menseki;
        alert(ketugou);
    底辺20、高さ10の三角形の面積は100
遊:おお 何だか本格的だ!
先生:というわけで 文章が表示できる ようになったので
    『alert』以外の 『文字列』 の表示方法も教えよう
        // <body>~</body>内で使う
        // Webページに文字列を表示
        document.write("文字列1");

        // writeの改行付き
        // (<pre>~</pre>内で改行される)
        document.writeln("文字列2");

        // ウインドウ上部のタイトル バーに『文字列』を表示
        document.title = "文字列3";
【4Page】
遊:むっ(ピキーン)
    『write』は ブラウザに直接文字を 表示させられる…
    Webページの文字は 直接印刷ができる!
先生:そうだな
遊:勝った! 宿題に勝利する日が来た!
    問題をプログラムで解いて 直接印刷できる!
    ありがとうございます
    今日初めて 先生がえらく見えたわ!
    これで宿題は 私の敵ではないわ!
【5Page】
ナレ:翌日 抜き打ちテスト
遊:ぐうう パソコンで解いて いいですか?
先生:駄目
遊:テストには 使えなかった

説明

この章では、『文字列変数』と、その様々な出力方法について学びます。

プログラムでは、数値だけでなく、文字を扱うことがよくあります。現代のコンピュータは、数字の計算を行うだけの道具ではありません。人間の作業を手助けする様々な用途に利用されます。その際、多くの人は、モニターで画面を見て操作を行います。この画面には、多くの文字や文章が表示されています。『文字列変数』は、そういった文字や文章を、プログラムで取り扱うための変数です。

また、JavaScriptを記述するHTMLファイルは、テキストファイルで書かれています。このテキストファイルは、文字や文章で構成されたファイルです。JavaScriptのプログラムで画面を書き換える際は、こういった文字や文章を加工したり、書き換えたりすることが多いです。そのため、『文字列変数』を利用したプログラムは、JavaScriptでは、避けて通ることはできません。

それでは以下、『文字列変数』について解説して、実際にプログラムを書いていくことにしましょう。

『文字列変数』の基本

『文字列』

まずは、『文字列』という言葉について説明します。

これまでも、『文字列』という言葉を、説明なしで何度か使ってきました。『文字列』という言葉は、『文字』がいくつか並んだものを指します。たとえば『あいうえお』は、『あ』『い』『う』『え』『お』という、5つの文字が並んだ『文字列』です。

文字列は長さは問いません。1文字でも100文字でも『文字列』と呼びます。たとえば、『遊』という1文字のみの文字も文字列と呼びます。また、『成績』という2つの文字が並んでいる場合も文字列と呼びます。さらに『』(何もない)のように、0文字の場合も文字列と呼びます(空の文字列と呼んだりします)。

参考

『文字列変数』

『文字列』を格納した変数のことを、『文字列変数』と呼びます。

文字列変数は、『+』(プラス)記号を使って連結できます。たとえば、以下のようなプログラムを実行すると、『遊の成績は低い』とダイアログに表示されます。

変数『a』から『e』までの『文字列』が、左から順に連結されて、その中身が『ketugou』変数に代入されるからです。

var a = "遊";
var b = "の";
var c = "成績";
var d = "は";
var e = "低い";
var ketugou = a + b + c + d + e;
alert(ketugou);

それでは以下、JavaScriptの『文字列変数』と、その扱い方、そして画面への様々な出力の仕方を詳しく説明していきます。

『JavaScript』の変数

『JavaScript』の変数には、数値を入れても、『文字列』を入れても構いません。『文字列』は、『"○○"』もしくは『'○○'』のように、両脇を『"』(ダブルクオーテーション)か『'』(シングルクオーテーション)で囲います。

var a = 100;              // 変数『a』に、数値変数を入れる
a = "文字列 文字列";      // 変数『a』に、数値の代わりに文字列を入れる
a = 99;                   // 変数『a』に、さらに数値を入れる

var b;                    // 変数『b』を作る。以下、様々な方法で、文字列を入れる
b = "文字列 文字列";      // 『"』で囲う
b = '文字列 文字列';      // 『'』で囲う
b = '文字"" 文字列';    // 『'~'』の中には、『"』を書ける
b = "文字'' 文字列";    // 『"~"』の中には、『'』を書ける
b = "文字\"\" 文字列";  // 『"~"』の中に直接『"』と書きたい場合は『\"』と書く

数値と『文字列』が混ざった計算

さて、『JavaScript』の変数には、数値を入れても、『文字列』を入れても構わないと書きました。ここで問題が発生します。数字を足す演算子も、『文字列』を連結する演算子も『+』です。数値と『文字列』が混在したプログラムでは、以下の計算はどうなるのでしょうか?

var a = 8;      // 数値変数
var b = "9";    // 文字列変数
var c = "先頭" + 10 + 20 + a + b + "末尾";  // 文字列の連結
document.write(c);      // 『先頭102089末尾』と表示

この場合、全て『文字列』として解釈されます。そのため変数『c』の値は、『先頭102089末尾』となります。

『文字列変数』を数値変数として解釈させる

文章を結合する式の中で、数値の計算を行わせたい場合は、その部分を『(~)』のように、丸括弧で囲います。

また、文字列変数を数値変数として解釈させたい場合は、その文字列変数に『-0』するか『1』して、数値とします(『a-0』『a1』のように書くと、文字列変数が数値に変換されます)。

以下のように書けば、数値として計算を行えます。

var a = 8;      // 数値変数
var b = "9";    // 文字列変数
var c = "先頭" + (10 + 20 + a + b * 1) + "末尾";  // 文字列の連結
document.write(c);      // 『先頭47末尾』と表示

この場合、変数『c』の値は『先頭47末尾』となります。

特殊な文字

『JavaScript』のプログラムでは、特殊な文字が出てきます。その中から、よく使うものを、表にまとめておきます。

記号 意味
\n 改行
\r 復帰
\t タブ文字
\" 『"~"』内で使う『"』
\' 『'~'』内で使う『'』
\ 『\』

『\』(バックスラッシュ、Windowsでは半角の円記号)は、特殊文字を示す記号として使われます。『¥』は、欧文フォントや、Windows以外の環境では『\』(半角逆斜めのバックスラッシュ)として表示されます。これは、表示が違うだけで、同じ記号です(注:厳密な話をするならば、Windows環境ではバックスラッシュが円記号で代替表示されます)。

『\r』(復帰)について補足です。改行は、Unix系(Linux、Macなど)では『\n』で、Windowsでは『\r\n』で表現されます。JavaScriptのプログラム内では、改行は『\n』だけ使っておけばよいです。ローカルから読み込んだファイルに『\r』(復帰)が付いている場合は、『"文章".replace(/\r/g, "")』(正規表現を使った文字列の置換。先の方で紹介)のようにして、『\r』(復帰)を全て取り除いてから利用するとよいです。(改行文字についての補足

それでは以下実例です。

『alert()』に『改行させた文字列』を表示させます。その文章中に『\n』を書きます。

alert("改行つき文字列\n改行されました");

『document.write()』で改行させたい場合は、文章中に『<br>』を書きます。

document.write("改行つき文字列<br>改行されました");

また、『JavaScript』のプログラムとは直接関係ないですが、HTMLで使用される特殊な文字の一覧も表にまとめておきます。

記号 意味
&lt; 『<』
&gt; 『>』
&amp; 『&』
&quot; 『"』
&nbsp; 空白文字

『<』と『>』は、HTMLファイルのタグに使用される文字列です。そのため、HTMLファイル中でこれらの文字列を表示させたい場合は、ブラウザが混乱しないように『&lt;』『&gt;』のように、別の記号を利用して書きます。こういった文字はいくつかあり、『&』もそういった文字です。この場合は『&amp;』と書きます。

また空白文字は『&nbsp;』と書きます。ブラウザでは、半角スペースで半角文字分の空白を挿入することができます。しかし、これは1文字分だけで、半角スペースを複数書いても、1文字分のスペースとしてしか判断されません。複数の空白文字を挿入したい場合は『&nbsp;』を利用します。

それでは以下に、これらの記号を使用したサンプルを掲載しておきます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <pre><script>
        // <pre>タグで囲っているので、改行がそのまま反映される
        document.write("改行つき文字列\n改行されました\nその他の記号&lt;&gt;&amp;&quot;");
        </script></pre>

        <script>
        // <pre>タグで囲っていないので、改行は<br>タグで行う
        document.write("       @<br>");
        document.write("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@&lt;BR&gt;");
        </script>
    </body>
</html>

改行文字についての補足

改行文字をJavaScript内で指定する場合は『\n』と書けばよいです。しかし、外部からプログラムに文字列を読み込む場合には、問題が生じることがあります。

Windowsでは、普通のテキストファイルの改行は『\r\n』と2つの文字で表されています。Unix系のOS(Linux、Macなど)では、テキストファイルの改行は『\n』と1文字になっています。

『\r』は『キャリッジリターン』(carriage return)で、『復帰』という意味です。

『\n』は『ニューライン』(newline)で、『改行』という意味です。

これらの記号はタイプライターの動作に由来しています。『復帰』で印字装置を行頭に戻し、『改行』で1行紙を送るという動作が元になっています。

ファイルを読み込んだ際に、『\n』を置換して、改行を除去しようとしたとします。その際、上手くいかずに改行されたままの場合は、『\r』も置換して除去するようにしてください。

この方法を頭の片隅に覚えておくと、行き詰らないで済みます。

参考

『文字列』の操作

以下、よく使う文字列操作のための命令を紹介します。

基本的な命令

意味 使い方 説明
.length 文字列の長さ a = "ABCDEF".length; 変数『a』に『6』が入る
.charAt(n) n文字目の文字 a = "ABCDEF".charAt(1); 変数『a』に『B』が入る
.substring(from,to) from~to-1文字目の文字 a = "ABCDEF".substring(1,3); 変数『a』に『BC』が入る
.substring(from) from~残り全ての文字 a = "ABCDEF".substring(1); 変数『a』に『BCDEF』が入る
.substr(from,len) from~len文字分の文字 a = "ABCDEF".substr(1,3); 変数『a』に『BCD』が入る
.substr(from) from~残り全ての文字 a = "ABCDEF".substr(1); 変数『a』に『BCDEF』が入る

文字列の簡単な検索

以下の命令で、『key』が見つからない場合は、変数に『-1』が入ります。

意味 使い方 説明
.indexOf(key,from) fromを始点に 最初のkey位置 a = "CDEABCDE".indexOf("DE",4); 変数『a』に『6』が入る
.indexOf(key) 最初のkey位置 a = "CDEABCDE".indexOf("DE"); 変数『a』に『1』が入る

文字列の検索や置換の詳細は、別の場所で改めて行います。

さらに多くの命令を知りたい人は、以下のリンクを参考にしてください。

参考

以下、中級者以上向け。

サンプルの入手

以下は、今回出てきたサンプルです。

ZIPでまとめてダウンロード (右クリックから保存してください)

sample1.html』(遊の成績は低い)を表示

sample2.html』(三角形の面積)を表示

sample3.html』(様々な文字列の表示方法)を表示

sample4.html』(改行)を表示

sample5.html』(様々な特殊文字)を表示

プログラムの中身を見たい場合は、それぞれのHTMLファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

メモ帳で、ファイルの中身を見ることができます。

Cronus Crown(クロノス・クラウン)のトップページに戻る
(c)2002-2018 Cronus Crown (c)1997-2018 Masakazu Yanai
このWebPageに関するご意見・お問い合わせは
サイト情報 弊社への連絡
までお願いします。