JavaScriptにおける文字列の扱い方
紹介
文字列は、文字、数字、または記号で構成される1つ以上の文字のシーケンスです。JavaScriptの文字列はプリミティブデータ型であり、イミュータブルであるため、不変です。
文字列はテキストを表示し、操作する方法であり、テキストはコンピュータを通じてコミュニケーションと理解の主要な手段であるため、文字列はプログラミングで慣れておくべき最も基本的な概念の一つです。
この記事では、文字列の出力を作成して表示する方法、文字列を連結する方法、文字列を変数に格納する方法、そしてJavaScriptでの文字列内の引用符、アポストロフィ、新しい行の使用ルールについて学びます。
文字列の出力を作成し、表示する
JavaScriptでは、文字列を書く方法は3つあります - シングルクォーテーション（' '）、ダブルクォーテーション（" "）、またはバッククォート（` `）の中に書くことができます。使用するクォートのタイプは両端で一致する必要がありますが、同じスクリプト内で3つのスタイルをすべて使用することも可能です。
ダブルクオートとシングルクオートを使用した文字列は、実質的に同じです。シングルクオートとダブルクオートの文字列に対する慣習や公式の好みはないため、重要なのはプロジェクトのプログラムファイル内で一貫性を保つことだけです。
'This string uses single quotes.';
"This string uses double quotes.";
文字列を作成する第三の最新の方法はテンプレートリテラルと呼ばれています。テンプレートリテラルはバックティック（グレイブアクセントとも呼ばれる）を使い、いくつかの追加の特典とともに通常の文字列と同じように機能します。これについてはこの記事で説明します。
`This string uses backticks.`;
文字列の出力を表示する最も簡単な方法は、console.log()を使ってコンソールに出力することです。
console.log("This is a string in the console.");
This is a string in the console.
値を出力するもう一つの簡単な方法は、alert()を使ってブラウザにアラートポップアップを送ることです。
alert("This is a string in an alert.");
上記の行を実行すると、ブラウザのユーザーインターフェースに次の出力が表示されます:
alert()は出力をテストし表示するためのあまり一般的ではない方法です。アラートを閉じるのがすぐに面倒になることがあります。
変数に文字列を格納する
JavaScriptの変数は、値を格納する名前付きのコンテナであり、var、const、またはletのキーワードを使用します。文字列の値を名前付き変数に割り当てることができます。
const newString = "This is a string assigned to a variable.";
今、newString変数が私たちの文字列を含んでいるので、それを参照してコンソールに出力することができます。
console.log(newString);
これにより文字列値が出力されます。
This is a string assigned to a variable.
変数を文字列の代わりに使用することで、使用するたびに文字列を再入力する必要がなくなり、プログラム内での文字列の操作が簡単になります。
文字列の連結
連結とは、2つ以上の文字列を結合して新しい文字列を作成することを意味します。連結を行うためには、連結演算子を使用し、これは+記号で表されます。+記号は、算術演算の際には加算演算子でもあります。
「海」と「馬」の間でシンプルな連結のインスタンスを作成しましょう。
"Sea" + "horse";
Seahorse
連結は文字列を端から端へと結合し、それらを組み合わせて新しい文字列の値を出力します。もし言葉の間にスペースを入れたい場合、Sea と horse の間に空白文字を含める必要があります。
"Sea " + "horse";
Sea horse
文字列と文字列値を含む変数を連結して結合します。
const poem = "The Wide Ocean";
const author = "Pablo Neruda";
const favePoem = "My favorite poem is " + poem + " by " + author + ".";
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}.`;
My favorite poem is The Wide Ocean by Pablo Neruda.
見ての通り、テンプレートリテラルに表現を含めることは、同じ結果を達成するための別の方法です。この場合、テンプレートリテラルを使用することは、書きやすく、便利かもしれません。
文字列リテラルと文字列値
ソースコードに書かれた文字列は引用符やバックティックで囲まれていることに気づくかもしれませんが、実際の出力には引用符は含まれていません。
"Beyond the Sea";
Beyond the Sea
これらを言及する際には区別があります。文字列リテラルは、ソースコードに記述されたそのままの文字列であり、引用符が含まれています。文字列値は、出力に表示されるもので、引用符は含まれていません。
上記の例では、"Beyond the Sea"は文字列リテラルであり、Beyond the Seaは文字列の値です。
文字列内の引用符とアポストロフィのエスケープ
文字列を示すために引用符が使用されるため、文字列内でアポストロフィや引用符を使用する際には特別な配慮が必要です。たとえば、シングルクォートの文字列の中間にアポストロフィを使用しようとすると、文字列が終了し、JavaScript は意図した文字列の残りをコードとして解析しようとします。
以下の
const brokenString = 'I'm a broken string';
console.log(brokenString);
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.";
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.`;
This is a string
that spans across
three lines.
新しい行を作成する方法や複数行にわたる文字列の作成方法をすべて把握することは重要です。異なるコードベースではさまざまな標準が使用されている可能性があります。
結論
この記事では、JavaScriptにおける文字列の基本について説明しました。シングルクォートとダブルクォートを使用して文字列リテラルを作成および表示すること、テンプレートリテラルの作成、連結、エスケープ、変数に文字列値を割り当てることについてです。