序章

文字列は、文字、数字、または記号で構成される1つ以上の文字のシーケンスです。 JavaScriptの文字列は、プリミティブデータ型であり、不変です。つまり、文字列は変更されません。

文字列はテキストの表示と操作の方法であり、テキストはコンピューターを介したコミュニケーションと理解の主な方法であるため、文字列はプログラミングの最も基本的な概念の1つです。

この記事では、文字列の出力を作成および表示する方法、文字列を連結する方法、文字列を変数に格納する方法、およびJavaScriptの文字列内で引用符、アポストロフ、および改行を使用する規則について学習します。

文字列の出力の作成と表示

JavaScriptでは、文字列を記述する3つの方法があります。一重引用符（' '）、二重引用符（" "）、またはバッククォート（` `）で記述できます。 使用する引用符のタイプは両側で一致する必要がありますが、3つのスタイルすべてを同じスクリプト全体で使用できる可能性があります。

二重引用符と一重引用符を使用する文字列は、事実上同じです。 一重引用符または二重引用符で囲まれた文字列には慣例や公式の好みがないため、重要なのはプロジェクトプログラムファイル内で一貫性を保つことです。

'This string uses single quotes.';

"This string uses double quotes.";

文字列を作成する3番目の最新の方法は、テンプレートリテラルと呼ばれます。 テンプレートリテラルはバッククォート（アクサングラーブとも呼ばれます）を使用し、通常の文字列と同じように機能しますが、この記事で説明するいくつかの追加のボーナスがあります。

`This string uses backticks.`;

文字列の出力を表示する最も簡単な方法は、console.log()を使用して文字列をコンソールに出力することです。

console.log("This is a string in the console.");

Output
This is a string in the console.

値を出力するもう1つの簡単な方法は、alert()を使用してブラウザにアラートポップアップを送信することです。

alert("This is a string in an alert.");

上記の行を実行すると、ブラウザのユーザーインターフェイスに次の出力が生成されます。

JavaScript Alert String Output

alert()は、アラートを閉じるのがすぐに面倒になる可能性があるため、出力をテストおよび表示するためのあまり一般的ではない方法です。

文字列を変数に格納する

JavaScriptの変数は、キーワードvar、const、またはletを使用して、値を格納する名前付きコンテナーです。 文字列の値を名前付き変数に割り当てることができます。

const newString = "This is a string assigned to a variable.";

newString変数に文字列が含まれているので、それを参照してコンソールに出力できます。

console.log(newString);

文字列値を出力します。

Output
This is a string assigned to a variable.

変数を使用して文字列を表すことにより、使用するたびに文字列を再入力する必要がなくなり、プログラム内での文字列の操作と操作が簡単になります。

文字列の連結

連結は、2つ以上の文字列を結合して新しい文字列を作成することを意味します。 連結するために、+記号で表される連結演算子を使用します。 +記号は、算術演算で使用する場合、加算演算子でもあります。

"Sea"と"horse"の間に連結の単純なインスタンスを作成しましょう。

"Sea" + "horse";

Output
Seahorse

連結は文字列を端から端まで結合し、それらを結合して新しい文字列値を出力します。 Seaとhorseの間にスペースを入れたい場合は、文字列の1つに空白文字を含める必要があります。

"Sea " + "horse";

Output
Sea horse

文字列と文字列値を含む変数を連結して結合します。

const poem = "The Wide Ocean";
const author = "Pablo Neruda";

const favePoem = "My favorite poem is " + poem + " by " + author + ".";

Output
My favorite poem is The Wide Ocean by Pablo Neruda.

連結によって2つ以上の文字列を組み合わせると、プログラム全体で使用できる新しい文字列が作成されます。

テンプレートリテラルを使用した文字列の変数

テンプレートリテラル機能の特別な機能の1つは、文字列内に式と変数を含める機能です。 連結を使用する代わりに、${}構文を使用して変数を挿入できます。

const poem = "The Wide Ocean";
const author = "Pablo Neruda";

const favePoem = `My favorite poem is ${poem} by ${author}.`;

Output
My favorite poem is The Wide Ocean by Pablo Neruda.

ご覧のとおり、テンプレートリテラルに式を含めることは、同じ結果を達成するためのもう1つの方法です。 この場合、テンプレートリテラルを使用すると、記述が簡単になり、便利になる可能性があります。

文字列リテラルと文字列値

ソースコードに記述した文字列が引用符またはバッククォートで囲まれていることに気付くかもしれませんが、実際の印刷出力には引用符が含まれていません。

"Beyond the Sea"; 

Output
Beyond the Sea

これらのそれぞれを参照する場合、違いがあります。 文字列リテラルは、引用符を含め、ソースコードに記述されている文字列です。 文字列値は出力に表示されるものであり、引用符は含まれていません。

上記の例では、"Beyond the Sea"は文字列リテラルであり、Beyond the Seaは文字列値です。

文字列での引用符とアポストロフィのエスケープ

文字列を表すために引用符が使用されているため、文字列でアポストロフィと引用符を使用する場合は、特別な考慮が必要です。 たとえば、一重引用符で囲まれた文字列の途中でアポストロフィを使用しようとすると、文字列が終了し、JavaScriptは目的の文字列の残りの部分をコードとして解析しようとします。

これは、以下のI'm縮約でアポストロフィを使用しようとするとわかります。

const brokenString = 'I'm a broken string';

console.log(brokenString);

Output
unknown: Unexpected token (1:24)

同じことが、二重引用符で囲まれた文字列で引用符を使用しようとする場合にも当てはまります。

これらの状況でエラーがスローされるのを回避するために、使用できるいくつかのオプションがあります。

  • 反対の文字列構文
  • エスケープ文字
  • テンプレートリテラル

これらのオプションについては、以下で説明します。

代替文字列構文の使用

壊れている可能性のある文字列の孤立したケースを回避する簡単な方法は、現在使用しているものとは逆の文字列構文を使用することです。

たとえば、"で作成された文字列のアポストロフィ。

"We're safely using an apostrophe in double quotes."

'で作成された文字列の引用符。

'Then he said, "Hello, World!"';

一重引用符と二重引用符を組み合わせる方法で、文字列内の引用符とアポストロフィの表示を制御できます。 ただし、プロジェクトプログラミングファイル内で一貫した構文を使用するように取り組んでいる場合、これをコードベース全体で維持するのは難しい場合があります。

エスケープ文字の使用（\）

バックスラッシュ（\）エスケープ文字を使用して、JavaScriptが引用符を文字列の終わりとして解釈しないようにすることができます。

\'の構文は常に一重引用符になり、\"の構文は常に二重引用符になり、文字列を壊す心配はありません。

この方法を使用すると、"で作成された文字列でアポストロフィを使用できます。

'We\'re safely using an apostrophe in single quotes.'

"で作成された文字列で引用符を使用することもできます。

"Then he said, \"Hello, World!\"";

この方法は少し面倒ですが、同じ文字列内でアポストロフィと引用符の両方を使用する必要がある場合があります。これにより、エスケープが必要になります。

テンプレートリテラルの使用

テンプレートリテラルはバッククォートで定義されているため、引用符とアポストロフィの両方を、余分なエスケープや考慮なしに安全に使用できます。

`We're safely using apostrophes and "quotes" in a template literal.`;

テンプレートリテラルは、文字のエスケープの必要性を防ぎ、埋め込み式を許可することに加えて、複数行のサポートも提供します。これについては、次のセクションで説明します。

文字列構文を交互に使用したり、エスケープ文字を使用したり、テンプレートリテラルを使用したりすると、文字列を安全に作成する方法がいくつかあります。

長い文字列と改行

文字列に改行文字やキャリッジリターンを挿入したい場合があります。 \nまたは\rエスケープ文字を使用して、コードの出力に改行を挿入できます。

const threeLines = "This is a string\nthat spans across\nthree lines.";

Output
This is a string
that spans across
three lines.

これは技術的には、複数の行で出力を取得するために機能します。 ただし、非常に長い文字列を1行に書き込むと、すぐに読みにくくなり、操作が非常に難しくなります。 連結演算子を使用して、文字列を複数行に表示できます。

const threeLines = "This is a string\n" +
"that spans across\n" +
"three lines.";

複数の文字列を連結する代わりに、\エスケープ文字を使用して改行をエスケープできます。

const threeLines = "This is a string\n\
that spans across\n\
three lines.";

注：この方法は、一部のブラウザーやミニファイアで問題が発生する可能性があるため、お勧めしません。

コードを読みやすくするために、代わりにテンプレートリテラル文字列を使用できます。 これらにより、改行を含む長い文字列を連結したりエスケープしたりする必要がなくなります。 文字列と改行は保持されます。

const threeLines = `This is a string
that spans across
three lines.`;

Output
This is a string
that spans across
three lines.

さまざまなコードベースがさまざまな標準を使用している可能性があるため、複数行にまたがる改行と文字列を作成するすべての方法を知っておくことが重要です。

結論

この記事では、一重引用符と二重引用符を使用した文字列リテラルの作成と表示、テンプレートリテラルの作成、連結、エスケープ、変数への文字列値の割り当てなど、JavaScriptでの文字列の操作の基本について説明しました。