DESIGNMAP

  1. TOP
  2. 公開講座
  3. ゼロから始めるJavaScript入門
  4. 文字列型 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.2】

文字列型 ー ゼロから始めるJavaScript入門(ECMAScript 2015)【Vol.2】

今回は文字列を学びます。従来からあるポイントに加えて、ECMAScript 2015から加わった便利な機能もまとめていきます。

文字列はシングルクォテーションか、ダブルクォテーションで囲みます。どちらでも同じです。

前回と同じく、Google ChromeのJavaScriptコンソールにコードを直接書いていきましょう。
>は入力欄、<-は出力結果を表しています。記述は不要です。

> "こんにちは"
<- "こんにちは"
> 'こんにちは'
<- "こんにちは"

文字列の中でダブルクォートを使いたいときは、シングルクォートで囲みます。逆に文字列の中にシングルクオートを使いたいときは、ダブルクオートで囲みます。

例えば、HTMLを出力するときは、シングルクォートで囲むと、文字列内にダブルクォートを表示することができます。

> '<header class="Header">'
<- "<header class="Header">"

エスケープシーケンス

特殊文字を表したいときに使うのがエスケープシーケンスです。例えば\nは改行を表します。

> "こんにちは\nこんばんは"
<- "こんにちは
   こんばんは"

ダブルクォートの中で、ダブルクォートを表示したいとき、シングルクォートの中でシングルクォートを表示したいときもエスケープシーケンスを利用します。

> "<header class=\"header\">"
<- "<header class="header">"

バッククォートで複数行の文字列の作成

バッククォート(`)で文字を囲むと複数行の文字列が作成できます。
JavaScriptでは従来は複数行の文字列をつくるのに苦労しました。ECMAScript2015でようやく複数行の文字列の作成機能が実現しました。

Atomで記述して確認しましょう。
AtomからJavaScriptを実行する場合は、簡単なHTMLを作成して、その中にJavaScriptのコードを埋め込んで実行します。

Atomを起動します。[ファイル]メニュー→[新規ファイル]をクリックします。[ファイル]メニュー→[保存]をクリックします。ドキュメント(もしくはマイドキュメント)フォルダ内に新規フォルダ「js-study」をつくります。Macの方は「書類」フォルダに「js-study」フォルダをつくります。

「js-study」内に、「str1.html」というファイル名で保存します。

以下のコードを記述します。

Atomの場合、「str1.html」として保存した後、htmlと記述して「Tab」キーを押すと、HTMLの基本の雛形が一発で自動生成されます。「Emmet」というツールが標準で使えます。便利なので試してみてください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script>
      var str = `
こんにちは
こんばんは
ありがとう`;

      console.log(str);
    </script>
  </body>
</html>

このファイルをGoogle Chromeで開きます。Google Chromeを起動して[ファイル]メニュー→[ファイルを開く]をクリックします。「str1.html」を選びます。

もしくはGoogle Chromeを起動して、「str1.html」をGoogle Chromeのウインドウ内にドラッグアンドドロップして、開く方法もあります。

Google ChromeのJavaScriptコンソールをみると、

こんにちは
こんばんは
ありがとう

と出力されます。便利なのはエスケープシーケンスなしで改行が反映される点です。

以下のようにタブかスペースでインデント(字下げ)をしてみましょう。
<script>から上のコードと</script>から下のコードは同じなので、コードの掲載を一部省略しています。

(省略)
<script>
var str = `
こんにちは
  こんばんは
    ありがとう`;

console.log(str);
</script>
(省略)

コードを修正したら「str1.html」を保存し、Google Chromeの[表示]メニュー→[ページを再読み込み]をクリックします。JavaScriptコンソールをみると、インデントが反映されていることが分かります。

こんにちは
  こんばんは
    ありがとう

このようにバッククォートを使うと、エスケープシーケンスなしでインデントや改行が表現できます。

console.log()は、コンソールに文字列として出力します。コンソールに直接コードを書いた実行対話モードとは違い、HTMLファイルからJavaScriptを実行する場合、データを出力したい場合はconsole.log()の記述が必要です。

文字列の結合

+演算子を使います。
Atomで新規ファイルをつくり「js-study」内に、「str2.html」というファイル名で保存します。
<script>から上のコードと</script>から下のコードは「srt1.html」と同じなので、コードの掲載を一部省略しています。

(省略)
<script>
    var name = "太郎";
    console.log("こんにちは" + name + "さん。");
</script>
(省略)

「str2.html」をGoogle Chromeで開き、JavaScriptコンソールをみると、

こんにちは太郎さん。

が出力されていれば成功です。

変数の値をコンソールに出力したい場合は、ダブルクォテーションをつけないようにしてください。
以下のように書いてしまうと

console.log("こんにちは" + "name" + "さん。");
こんにちはnameさん。

となってしまいます。nameは変数ではなく、"name"という文字列として処理されます。

テンプレートリテラルを使った変数を組み込んだ文字列の作成

先ほどの"こんにちは" + name + "さん。"はコードが読みにくいと思います。
バッククォートを使うと書きやすく、読みやすいコードが書けます。

Atomで新規ファイルをつくり「js-study」内に、「str3.html」というファイル名で保存します。
下記のコードを記述します。
<script>から上のコードと</script>から下のコードは「srt1.html」と同じなので、コードの掲載を一部省略しています。

(省略)
<script>
    var name = "太郎";
    console.log(`こんにちは${name}さん。`)
</script>
 (省略)

「str3.html」をGoogle Chromeで開き、JavaScriptコンソールをみると、

こんにちは太郎さん。

さきほどの複数行の文字列の作成も含め、このバッククォートを使った機能はテンプレートリテラルと呼ばれます。ECMAScript 2015で加わった機能です。テンプレートリテラルは他にも関数と連携した高度な機能があるのですが、また回を改めて解説します。

型の調べ方

typeof()を使います。文字列値に適用すると"string"が表示されます。
JavaScriptコンソールで試してみましょう。

> typeof("こんにちは")
<- "string"

typeof()は、()なしでも可能です。

> typeof "こんにちは"
<- "string"

スポンサーリンク

文字列の長さを取得する

lengthで取得できます。JavaScriptコンソールで試してみましょう。

> "こんにちは".length
<- 5

このコードは正確に説明すると、文字列のラッパーオブジェクトというのが一時的に生成されています。ややマニアックなトピックなのでまた回を改めて説明します。

sliceを使った文字の抽出

slice()を使うと文字列から一部を抽出できます。
JavaScriptコンソールで試してみましょう。

> "こんにちは".slice(1, 4)
<- "んにち"

slice(先頭オフセット、末尾オフセット)という書式です。オフセットは0始まりなので、1は「ん」を指し、4は「は」を指します。末尾オフセットの1つ前までが抽出されます

> "こんにちは".slice(2)
<- "にちは"

先頭オフセットだけを指定した場合は、先頭オフセットから最後まで抽出されます。

先頭オフセットを省略して、末尾オフセットだけを書くとエラーになります。

> "こんにちは".slice(, 2)
<- Uncaught SyntaxError: Unexpected token

SyntaxErrorとは文法エラーです。エラーメッセージは英語ですが、必ず読む習慣をつけてください。

オフセットにマイナスの整数をつけることが可能です。
この場合、文字列の末尾の文字を抽出できます。

> "こんにちは".slice(-1)
<- "は"
> "こんにちは".slice(-2)
<- "ちは"
> "こんにちは".slice(-3)
<- "にちは"
> "こんにちは".slice(-3, -1)
<- "にち"

slice()は無理に覚えるより、実際にJavaScriptコンソールに打ち込んで、体感しておくのがコツです。忘れてしまっても問題ありません。また調べればよいのですから。

今回はここまでとします。

スポンサーリンク

関連記事

プロフィール

DESIGNMAP
制作ディレクター
ON VISITINGを制作・運営。
お問い合わせ