文字列変数と様々な出力

マンガで分かる JavaScriptプログラミング講座

マンガで分かる JavaScriptプログラミング講座 第2版



第1部 JavaScriptプログラミングの基本
第5話:文字列変数と様々な出力

目次



マンガ












マンガ台詞

【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』『a*1』のように書くと、文字列変数が数値に変換されます)。

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

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

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

特殊な文字

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

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

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

(注:厳密な話をするならば、Windows環境ではバックスラッシュが円記号で代替表示されています)

『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;』を利用します。

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

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

        <script type="text/javascript">
        <!--
        // <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では、テキストファイルの改行は『\n』と1文字になっています)。

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

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

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

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

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


参考:Wikipedia - 改行コード



『文字列』の操作

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

基本的な命令
意味使い方説明
.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』が入る

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

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


参考:とほほのJavaScriptリファレンス - 文字列(String)



サンプルの入手

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

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

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

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

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

sample4.html』(改行)を表示

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

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

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

≫ 「マンガで分かる JavaScriptプログラミング講座」トップに戻る


『柳井政和』 の初心者向け講座

『柳井政和』 のサイト

マンガで分かる Java入門講座
Javaのオブジェクト指向を解説するサイトです。
Webページ100ページ以上、マンガ800ページ以上で
解説を行っています。


PuzzleAndGame.com
JavaScriptで作ったゲームが中心のサイト。
タワーディフェンス、リバーシ、パズルゲームなどを公開。
Webブラウザ、PCアプリ、Androidアプリとして動作。


クロクロ・ツールズ
全てJavaScriptで作られた、ブラウザから利用できる各種アプリケーションです。
HTML5に対応しているモダンブラウザから使えます。
ブックマークに入れるなどして、ご利用ください。


『柳井政和』 執筆の本

「裏切りのプログラム ハッカー探偵 鹿敷堂桂馬」
文藝春秋より発売(2016年8月27日発売、予約注文可能です)。
2016年の松本清張賞で、最終候補に残った小説です。
プログラマー鹿敷堂桂馬が、女性社長の安藤裕美とともに、
IT業界で起きた事件の解決に挑みます。
プログラマーが探偵役のエンタメ・ミステリーです。


「JavaScript 仕事の現場でサッと使える! デザイン教科書」
プログラミング初心者向けに、様々な利用例を元に、プログラムとJavaScriptを解説する本。
プログラム自体が初めての方にも、なるべく分かりやすいように書いています。
技術評論社より発売。


「プログラマのためのコードパズル〜JavaScriptで挑むコードゴルフとアルゴリズム」
コードゴルフやアルゴリズム問題、その解説、関連知識の紹介を行った本です。
プログラマーなら、楽しめる内容になっています。
技術評論社より発売。


「マンガでわかるJavaScript」
本講座が書籍になりました。 本用に、より分かりやすく、読みやすく、再構成して書き直しました。
よければ、手にとっていただけると嬉しいです。
秀和システムより発売。


「マンガでわかるJavaプログラミング」
プロ部の面々が、今度はjavaのプログラミングに挑戦。
javaを1から学ぶ人向けの書籍です。
秀和システムより発売。 詳細情報


古い本
HTML5&JavaScript本格ゲームプログラミング 〜ライブラリ自作からはじめるブラウザゲーム開発
マンガでわかるAndroidプログラミング 第2版
Google Androidアプリ開発ガイド 第3版
プロならば知っておくべきWebコーディング&デザインの定石100

『柳井政和』 開発のWebアプリやソフトなど

PuzzleAndGame.com
全自動4コマ
全自動百科事典(オートペディア)
全自動似顔絵
新刊・新作カレンダー
EX リバーシ
全自動迷路
めもりーくりーなー
ラジオ・ブラウザ
PCソフト
マンガで分かる JavaScriptプログラミング講座
スクリーンセーバー「なう」
開発元:クロノス・クラウン




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