JavaScriptのデータ型 「文字列」

jsコード JavaScript

本シリーズでは、プログラミング言語を問わず重要、且つ基礎的な内容である「データ型」について、連載形式で「これでもか」というぐらいに詳しく説明していきます。
説明するデータ型は、プリミティヴとして用意されている7種類を対象としています。

今回はその第三弾となり、「文字列」がテーマです。

文字列型

文字列(string)は、文字通り「文字の列」なのですが、それだけでは済まされない大人の事情も色々と絡んできます。

例えば、”100″ 👈これは文字列です。

「数値じゃないか!」と思った方は正しいです、人間としては。
しかし、JavaScriptの世界(プログラミングの世界)では一度クォーテーションに囲まれてしまったものは、数値の姿をしていても、その正体は……文字列と化してしまうのです。(ホラー調)

以下の一覧は全て「文字列」です。

  1. “abcde”, “9xa4bb”
  2. “あ”, “a”
  3. “090-1111-2222”, “0311112222”
  4. ” “, ” “
  5. “”

2. の例では文字「列」というよりも1文字ですし、4. の中身はスペースです。
最後の5. の例に至っては、ダブルクォーテーションのみで、囲まれているものすらありません。
しかし、これも「空文字」と呼ばれる立派な文字列なのです。

よって、「文字列」を文章で定義すると、次のようになります。

文字列とは、0 文字以上の文字の並びである。

文字列を記述する方法とルール

文字列をプログラムコード内に記述するには、シングルクォーテーション「’」ダブルクォーテーション「”」バッククォーテーション「`」のいずれかのクォーテーションで全体を囲みます。

シングルとダブルのクォーテーションには、違いがありません。
次のように、クォーテーションを文字列内で使いたい場合などに入れ子にするのがポピュラーな使いどころです。

'So... I said "Stop!".'

👆こうすることで、シングルクォーテーションに囲まれた全体が文字列となるので、「”Stop”」部分がクォーテーションも含めて文字列として認識されます。

ただし、バッククォーテーションについては、補足で解説が必要です。

バッククォーテーションについて

まだ演算子について学習していない方のために、「文字列連結」について簡単に説明しておきます。

JavaScriptやJavaなどの多くのプログラミング言語では、文字列同士を「+」演算子を使って連結することができます。

例として以下のプログラムを読み、どのように動作するか予測してみてください。

script.js
let firstName = "Luke";
let secondName = "Skywalker";
console.log(firstName + secondName);

なんとなく結果が想像できるかと思います。
実行結果は以下の通りです。

実行結果
> LukeSkywalker

どうですか?「名前」と「苗字」の間にスペースが欲しくなりますよね。

さらに、挨拶もしたいので、「Hello!」を先頭に加えてみましょう。
ということで、次のように修正します。

script.js
let firstName = "Luke";
let secondName = "Skywalker";
console.log("Hello! " + firstName + " " + secondName);

というように、「+」演算子を使うことで文字列同士を連結できるわけですが、これには弊害もあります。

  • 演算子と文字列が混在しているため、連結する要素が増えると読みづらい
  • 文字列の中にクォーテーションがあったりすると読みづらい
  • コードが必要以上に長くなりやすく読みづらい

読みづらいだけでなく、ミスも発生しやすくなります。

そこで、バッククォーテーション「`」の出番です!

script.js
let firstName = "Luke";
let secondName = "Skywalker";
console.log(`Hello! ${firstName} ${secondName}`);

このように文字列や変数を一気にバッククォーテーション「`」で囲みます。
変数はドルマーク「$」と波カッコ「{」「}」で囲みます。

すると、文字列(スペースを含む)と変数を、「+」で連結する必要なく一つの文字列をして囲むことができます。
大変便利ですね。

このバッククォーテーション「`」を使用した文字列表現方法を「テンプレートリテラル」(*1) と言います。

*1:「テンプレートリテラル」は、ECMAScript 2015、通称ES6で追加された機能じゃ。それ以前のバージョンや非対応のブラウザでは使うことは叶わぬ。

時は今や2024年。さすがに非対応ブラウザはないやもしれんが、ジェダイたるもの言語やツールのバージョンには常に気を配らねばならぬ。

最後に

JavaScriptの文字列は、オブジェクトとして多くの便利なメソッドを使うことができます。
それについては、後の記事で詳しく紹介しますので、楽しみにしていてください。

次に学習するのは『JavaScriptのデータ型「論理値」』です。


本記事についての質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメント頂ければ幸いです。

最後までお読みいただき、ありがとうございました。

『詳説 JavaScript』メニューに戻る

コメント

タイトルとURLをコピーしました