JavaScript の行継続文字

Tahseen Tauseef 2024年2月15日
  1. JavaScript の語彙文法
  2. JavaScript の文字列リテラル
  3. JavaScript での行継続
  4. JavaScript でエスケープ メソッドを使用して行継続を実装する
  5. JavaScript でテンプレート リテラルを使用して行継続を実装する
  6. JavaScript で HTML Break 要素を使用して行継続を実装する
JavaScript の行継続文字

JavaScript の字句文法は、この短い JavaScript チュートリアルで説明されています。 また、文字列については、さまざまな新しいライン テクニックを使用して詳細に説明し、これらの文字列を処理する際の改行の処理方法についても説明します。

JavaScript の語彙文法

コンピューター サイエンスでは、字句文法はトークンの構文を記述する技術的な文法です。 プログラムは、言語の言語構造によって定義された文字で構成されています。

文字セットは、書き言葉のアルファベットに匹敵します。 ECMAScript スクリプトのソース テキストは左から右に読み取られ、トークン、制御文字、行末記号、コメント、空白などの一連の入力コンポーネントに変換されます。

ECMAScript は、ステートメントの後にセミコロンを挿入するための特定のキーワード、リテラル、および規則を定義します。

JavaScript の文字列リテラル

文字列リテラルは、一重引用符または二重引用符で囲まれた 0 個以上の Unicode コード ポイントの順序です。 エスケープ シーケンスは、Unicode コード ポイントを表すこともできます。

次の終了引用符のコード ポイントを除いて、すべてのコード ポイントは文字列リテラル内で逐語的に発生する可能性があります。

  1. U+005C または \ (バックスラッシュ),
  2. U+000D または <CR>,
  3. そして U+000A または <LF>.

任意のコード ポイントは、エスケープ シーケンスとして表示できます。

文字列リテラルは、ECMAScript 文字列値として解釈されます。 Unicode コード ポイントは、これらの文字列値が生成されるときに UTF-16 でエンコードされます。

JavaScript での行継続

JavaScript での文字列操作は複雑な場合があります。 文字列操作はマスターするのは簡単ですが、実装するのは難しく、関連する領域の 1つは新しい行を追加することです。

JavaScript で新しい行を挿入する方法は他にもありますが、HTML の段落や改行タグほど簡単ではありません。

とはいえ、JavaScript で改行を挿入する最も一般的な方法を見てみましょう。

JavaScript でエスケープ メソッドを使用して行継続を実装する

JavaScript では、エスケープ シーケンスは新しい行を作成する体系的な方法です。 Windows と Linux では、改行のエスケープ シーケンスは \n です。 ただし、いくつかの古い Mac では、\r が使用されます。

エスケープ シーケンスの実装は比較的簡単です。

例:

let data = 'Hello World';

let newstring = 'Hello \nWorld';

console.log(data);

console.log(newstring);

出力:

"Hello World"
"Hello
World"

この リンク を使用して、上記のコード セグメントの結果を確認することもできます。

Note
JavaScript がスペースとして解釈し、出力に含めるため、改行エスケープ シーケンスの後にスペースを含めないでください。

16 進エスケープ シーケンス

16 進数のエスケープ シーケンスは、文字 \x の後に、コード単位または 0x0000 から 0x00FF の範囲のポイントを示す 2つの 16 進数が続きます。

例:

'\xA9'  // "©"

Unicode エスケープ シーケンス

\u に続く Unicode エスケープ シーケンスは、正確に 4 桁の 16 進数で構成されます。 UTF-16 エンコーディングでは、コード単位を示します。

コード単位は、コードポイント U+0000 から U+FFFF に相当します。 コード ポイントには、文字のエンコードに使用される 2つのコード単位を反映する 2つのエスケープ シーケンスが必要です。 サロゲート ペアはコード ポイントから一意です。

例:

'\u00A9'  // "©" (U+A9)

Unicode コード ポイントのエスケープ シーケンス

Unicode コード ポイントのエスケープ シーケンスは、\u{} と 16 進数のコード ポイントで構成されます。 16 進数は 0 から 0x10FFFF の範囲でなければなりません。

U+10000 から U+10FFFF までのコードポイントにはサロゲートペアは必要ありません。 ECMAScript 2015 では、コード ポイント エスケープが JavaScript (ES6) に追加されました。

例:

'\u{2F804}'  // CJK COMPATIBILITY IDEOGRAPH-2F804 (U+2F804)

// the same figure portrayed as a surrogate twin

'\uD87E\uDC04'

JavaScript でテンプレート リテラルを使用して行継続を実装する

テンプレート リテラルは複雑に見えるかもしれませんが、専門用語の背後にある埋め込み式をサポートする文字列リテラルです。 複数行の文字列の使用を容易にします。

バッククォート (``) は、テンプレート リテラルを囲むために使用されます。

例:

let data = 'Hello \nWorld';

let newstring = `Hello

World`;

console.log(data);

console.log(newstring);

出力:

"Hello
World"
"Hello
World"

この リンク を使用して、上記のコード セグメントの結果を確認することもできます。

エスケープ メソッドとテンプレート リテラルの両方の状況で、同じ出力が返されます。 ただし、ご覧のとおり、テンプレート リテラルを使用すると、複数行の文字列を簡単に記述できます。

JavaScript で HTML Break 要素を使用して行継続を実装する

JavaScript で新しい行を作成する別の方法は、文字列に HTML 改行要素を含めることです。

改行要素は、行の分割が重要な場合にのみ使用する必要があることに注意してください。 ただし、この戦略は非常に普及しているため、それについても検討します。

例:

<html>

<body>

<p id="newline"></p>

<script>

let data = "Hello" + "<br>" + "World ";

document.getElementById("newline").innerHTML = data;

</script>

</body>

</html>

出力:

Javascript 行継続 - 出力

ノート
他のテキスト コンテンツの場合のように、.innerText ではなく、.innerHTML を使用することを忘れないでください。

この リンク を使用して、上記のコード セグメントの結果を確認することもできます。