前書き
-
string *は、文字、数字、または記号で構成される1つ以上の文字のシーケンスです。 JavaScriptの文字列はプリミティブなhttps://www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript#strings [データ型]で不変であり、不変です。
文字列はテキストを表示および操作する方法であり、テキストはコンピュータを介して通信および理解する主な方法であるため、文字列はプログラミングの最も基本的な概念の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.");OutputThis is a string in the console.値を出力する別の簡単な方法は、 `+ alert（）+`を使用してブラウザに警告ポップアップを送信することです：
alert("This is a string in an alert.");上記の行を実行すると、ブラウザのユーザーインターフェイスに次の出力が生成されます。
image：https：//assets.digitalocean.com/articles/eng_javascript/js-strings/js-alert-string-output.png [JavaScriptアラート文字列出力]
`+ alert（）+`は、出力をテストおよび表示するあまり一般的ではない方法です。アラートを閉じるのがすぐに面倒になる可能性があるためです。
変数に文字列を保存する
JavaScriptの変数は、キーワード + var +、 `+ const `または ` let +`を使用して、値を保存する名前付きコンテナです。 文字列の値を名前付き変数に割り当てることができます。
const newString = "This is a string assigned to a variable.";`+ newString +`変数に文字列が含まれているので、それを参照してコンソールに出力できます。
console.log(newString);これにより、文字列値が出力されます。
OutputThis is a string assigned to a variable.変数を使用して文字列を表すことにより、使用するたびに文字列を再入力する必要がなくなり、プログラム内で文字列を操作および操作しやすくなります。
文字列連結
*連結*は、2つ以上の文字列を結合して新しい文字列を作成することを意味します。 連結するには、「」記号で表される連結演算子を使用します。 ``シンボルはhttps://www.digitalocean.com/community/tutorials/how-to-do-math-in-javascript-with-operators#addition-and-subtraction[addition operator]算術演算で使用されます。
`" Sea "`と `" horse "`の間に連結の単純なインスタンスを作成しましょう。
"Sea" + "horse";OutputSeahorse連結は、文字列をエンドツーエンドで結合し、それらを結合して、まったく新しい文字列値を出力します。 単語 `+ Sea `と ` horse +`の間にスペースを置きたい場合、文字列の1つに空白文字を含める必要があります。
"Sea " + "horse";OutputSea horse文字列値を含む文字列と変数を連結して結合します。
const poem = "The Wide Ocean";
const author = "Pablo Neruda";
const favePoem = "My favorite poem is " + poem + " by " + author ".";OutputMy 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}.`;OutputMy favorite poem is The Wide Ocean by Pablo Neruda.ご覧のとおり、テンプレートリテラルに式を含めることは、同じ結果を達成する別の方法です。 この場合、テンプレートリテラルを使用すると、記述しやすくなり、便利になる場合があります。
文字列リテラルと文字列値
ソースコードで記述する文字列は引用符またはバッククォートで囲まれていますが、実際の印刷出力には引用符が含まれていません。
"Beyond the Sea";OutputBeyond the Seaこれらのそれぞれを参照する際には区別があります。 *文字列リテラル*は、引用符を含む、ソースコードで記述された文字列です。 *文字列値*は出力に表示されるものであり、引用符は含まれません。
上記の例では、 `" Beyond the Sea "`は文字列リテラルで、 `+ Beyond the Sea`は文字列値です。
文字列内の引用符とアポストロフィのエスケープ
文字列を示すために引用符が使用されるという事実により、文字列でアポストロフィと引用符を使用する場合は特別な考慮が必要です。 たとえば、単一引用符で囲まれた文字列の途中でアポストロフィを使用しようとすると、文字列が終了し、JavaScriptは目的の文字列の残りをコードとして解析しようとします。
これは、以下の「+ I’m +」短縮形でアポストロフィを使用することで確認できます。
const brokenString = 'I'm a broken string';
console.log(brokenString);Outputunknown: 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.`;文字のエスケープの必要性を回避し、埋め込み式を許可することに加えて、テンプレートリテラルは複数行のサポートも提供します。これについては、https：//www.digitalocean.com/community/tutorials/how-to-work-で説明します。 with-strings-in-javascript＃long-strings-and-newlines [次のセクション]。
代替文字列構文、エスケープ文字、およびテンプレートリテラルを使用して、文字列を安全に作成する方法がいくつかあります。
長い文字列と改行
文字列に改行文字またはキャリッジリターンを挿入したい場合があります。 `+ \ n `または ` \ r +`エスケープ文字を使用して、コードの出力に改行を挿入できます。
const threeLines = "This is a string\nthat spans across\nthree lines.";OutputThis 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.`;OutputThis is a string
that spans across
three lines.さまざまなコードベースがさまざまな標準を使用している可能性があるため、複数の行にまたがる改行や文字列を作成するすべての方法を認識することが重要です。
結論
この記事では、一重引用符と二重引用符を使用した文字列リテラルの作成と表示、テンプレートリテラルの作成、連結、エスケープ、変数への文字列値の割り当てなど、JavaScriptで文字列を操作する基本について説明しました。