最新！JavaScript入門講座ー文字列の基本をわかりやすく解説

文字列というのは、JavaScriptのみならず、ほとんどのプログラミング言語に搭載されている機能です。”金融資産”,”プログラミング”といった0文字以上の文字の並びを文字列と、JavaScriptでは言います。文字列は実務でも、使われている重要な概念です。

画面に文字情報を出力させたり、文章を作ったりなど様々なところに使われています。なので、文字列をしっかりと理解することが必要になるでしょう。

本記事では、JavaScriptの文字列についてわかりやすく解説していきます。

JavaScriptの文字列の基本を解説

文字列の宣言と初期化

まずは文字列の宣言と初期化をやってみましょう。サンプルコードを見てください。

const str1 = "今日はシン・エヴァンゲリヲンを見ました";
let str2 = '若い時の時間はとても貴重なのです';

console.log(str1);
console.log(str2);

文字列を宣言、初期化する場合は文字を“(ダブルクォーテーション)もしくは‘(シングルクォーテーション)のどちらかで囲む必要があります。
シングルクォーテーションとダブルクォーテーションとの間に違いはありません。どちらも、同じ文字列として認識されます。

$ node string.js

今日はシン・エヴァンゲリヲンを見ました
若い時の時間はとても貴重なのです

実行しても、同じ文字列として認識されています。

使う記号は、どちらか一方にしてください。下のように、シングルクォーテーションとダブルクォーテーションを混ぜて使うとエラーが起こります。

const str1 = "今日はシン・エヴァンゲリヲンを見ました';
let str2 = '若い時の時間はとても貴重なのです";

console.log(str1);
console.log(str2);

$ node string.js

SyntaxError: Invalid or unexpected token

バッククォーテーションを使って宣言初期化する

先ほどは文字列を宣言初期化する方法を解説しました。文字列を初期化するにはシングルクォーテーションとダブルクォーテーションが必要でした。
しかし、実はそれ以外にも初期化する方法はあります。

それが、`(バッククォーテーション)です。サンプルコードを見てみましょう。

const str = `本日の日経平均は30,000円を超えています`;

console.log(str);

$ node back.js

本日の日経平均は30,000円を超えています

実行すると先ほどと同じような結果になります。基本的に、バッククォーテーションも同じ文字列として認識されます。

エスケープシーケンスを使う

文字列の中には、半角英数字、全角文字、記号などが認識されます。しかし、文字列として認識されないものがあります。それらを入力するための方法がエスケープシーケンスです。
エスケープシーケンスを入力することで、文字列に変化を加えることができます。

ここでは、エスケープシーケンスについて解説していきます。エスケープシーケンスには次のようなものがあります。

よく使うエスケープシーケンスはこの通りです。では、実際にプログラミングでの例を見てみましょう。

//改行
let str = "本日、新たに30の企業が\n東証一部に上場しました";
console.log(str);

//水平タブ
str = "本日、新たに30の企業が\t東証一部に上場しました";
console.log(str);

//垂直タブ
str = "本日、新たに30の企業が\v東証一部に上場しました";
console.log(str);

//改ページ
str = "本日、新たに30の企業が\f東証一部に上場しました";
console.log(str);

//復帰
str = "本日、新たに30の企業が\r東証一部に上場しました";
console.log(str);

//ダブルクォーテーション
str = "本日、新たに30の企業が\"東証一部\"に上場しました";
console.log(str);

//シングルクォーテーション
str = "本日、新たに30の企業が\'東証一部\'に上場しました";
console.log(str);

//バッククォーテーション
str = "本日、新たに30の企業が\`東証一部\`に上場しました";
console.log(str);

//Null文字
str = "本日、新たに30の企業が\0東証一部\0に上場しました";
console.log(str);

$ node escape.js

本日、新たに30の企業が                         //改行
東証一部に上場しました
本日、新たに30の企業が  東証一部に上場しました  //水平タブ
本日、新たに30の企業が                         //垂直タブ
                      東証一部に上場しました
本日、新たに30の企業が                         //改ページ
                      東証一部に上場しました
東証一部に上場しました                         //復帰
本日、新たに30の企業が"東証一部"に上場しました  //ダブルクォーテーション
本日、新たに30の企業が'東証一部'に上場しました  //シングルクォーテーション
本日、新たに30の企業が`東証一部`に上場しました  //バッククォーテーション
本日、新たに30の企業が東証一部に上場しました    //Null文字

実行すると、このようになるはずです。それぞれがどのような挙動をするのが、分かったと思います。

文字列の中に変数を入れる

文字列は文字のみだけではなく、変数も組み込むことが可能です。先ほど解説した、バッククォーテーションで初期化した文字列は変数を入れることができます。

サンプルコードを見てみましょう。

let tick = "SPY";
let doll = 10000;
let str = `ハルヒちゃんは今月ETFである${tick}を${doll}ドル分買いました`; 

console.log(str);

$ node string.js

ハルヒちゃんは今月ETFであるSPYを10000ドル分買いました

実行するとこのようになります。
このサンプルだと文字列の中に変数が２つ入っています。文字列の中で変数を扱うには、${}の中に変数を入れます。こうすることで、変数を文字列の中に組み込むことが可能になります。

まとめ

では、今回のまとめに入りましょう。

今回はここまでとなります。お疲れさまでした。

参考文献

文法とデータ型 - JavaScript | MDN

この節では JavaScript の基本文法、変数宣言、データ型、リテラルについて説明します。

developer.mozilla.org

文字列 · JavaScript Primer #jsprimer

文字列リテラルを使った文字列の作成から検索や置換など基本的な文字列操作について紹介します。また正規表現と組み合わせた文字列操作やタグ付きテンプレート関数を使ったテンプレート処理などについても紹介します。

jsprimer.net

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/

www.freecodecamp.org