文字列

docs.scrimba.com

ログイン済みユーザーのためのグリーティングメッセージを作成しており、その人の名前が変数に入っています。「Welcome back, Taro」のようにページに表示する必要がありますが、「Taro」を手で入力する必要はありません。なぜなら、明日は Hanako で、その翌日は聞いたことのない人かもしれないからです。その場で構築、測定、そして形を変えられるテキストが文字列であり、本章ではそれらを扱う方法について学びます。

文字列を作成する

**文字列**はテキストです。引用符で囲まれた任意の文字の実行です。シングルクォートまたはダブルクォートを使用できます。どちらでも同じように動作するため、1 つを選んで一貫性を保ってください。

const firstName = "Taro";
const greeting = "Welcome back";

文字列を構築する最も便利な方法はテンプレートリテラルです。引用符の代わりにバッククォートで記述します。テンプレートリテラル内では、${...} を使ってテキストに値を挿入でき、JavaScript がその値が保持しているものを入力します。

const firstName = "Taro";
const message = `Welcome back, ${firstName}`;
console.log(message); // Welcome back, Taro

この ${firstName} はスロットです。文字列が構築されるとき、スロットは firstName の値で置き換えられます。複数のピースから文字列を構築するときはテンプレートリテラルを使用してください。

**文字列**はテキストで構成された値です。シングルクォートとダブルクォートは同一の文字列を生成するため、それらの間の選択はスタイルと、含める必要があるクォート文字についてです。"it's here" はエスケープを回避し、'she said "hi"' も同様です。

優先すべき形式はテンプレートリテラルです。バッククォートで記述される文字列です。通常のクォートではできない 2 つのことを実行します。${...} で値を補間し、任意の式の結果をテキストに直接挿入でき、特殊なエスケープなしで複数行にまたがることができます。

const firstName = "Taro";
const itemCount = 3;
const message = `Welcome back, ${firstName}. You have ${itemCount} items waiting.`;
console.log(message); // Welcome back, Taro. You have 3 items waiting.

値を生成するすべてのものをスロットに入れることができます。変数名だけでなく、${itemCount} は同じく ${itemCount + 1} でも可能です。${...} でテキストを構築することは、クォートとプラス記号でピースを一緒に接着するよりもはるかに読みやすいため、これがデフォルトです。

文字列は JavaScript のテキスト**プリミティブ**です。言語の基本的な値型の 1 つで、数値とブール値と並んでいます。（完全なセットについてはデータ型を参照してください）シングルクォートとダブルクォートは互換性があり、まったく同じ値を生成します。それらが強制する唯一の実際の決定は、どのクォート文字をエスケープする必要があるかということです。

デフォルトにする価値がある形式はテンプレートリテラルです。バッククォートで区切られています。${...} で任意の式を補間し、内部を評価し、結果を文字列に強制し、リテラルなニューラインを保持するため、複数行のテキストは \n を必要としません。

const firstName = "Taro";
const itemCount = 3;
const summary = `Hi ${firstName}, you have ${itemCount} items and ${itemCount === 1 ? "it is" : "they are"} waiting.`;
console.log(summary); // Hi Taro, you have 3 items and they are waiting.

スロットは名前だけでなく式を保持するため、算術、メソッド呼び出し、比較すべてがそれ内部で動作します。その表現力が、2 部分以上の文字列の場合に連結に優る理由です。最終的なテキストの形状がソースで読み取り可能な状態を保ちます。構築すべき唯一の習慣は、デフォルトでバッククォートに到達し、補間が何ももたらさない固定の単一部分の文字列でのみプレーンクォートに低下することです。

Juno文字列を作成する 文字列はクォート内のテキストで、シングルクォートもダブルクォートも同じように動作するため、1 つを選んでそれを保持してください。複数のピースからテキストを構築するには、テンプレートリテラルを使用します。${...} スロットが入力された値で満たされるバッククォートです。これはあなたが最も到達するツールです。

Juno文字列を作成する シングルクォートとダブルクォートは同一の文字列を作成するため、エスケープなしで含める必要があるクォートに基づいて選択します。ただし、テンプレートリテラルがデフォルトです。バッククォートを使用すると、${...} で任意の値をドロップでき、複数行を無料でスパンできます。補間したら、手で文字列を接着することは価値があるように感じなくなります。

Juno文字列を作成する クォートは相互交換可能です。1 つを別のものより選ぶ唯一のものはどの文字をエスケープする必要があるかです。${...} が名前だけでなく完全な式を取得するため、デフォルトでバッククォートに到達してください。そのため、算術と比較はテキスト内で直接動作します。補間が何ももたらさない固定の単一部分の文字列のためにプレーンクォートを保持してください。

結合と測定

+ 演算子を使って 2 つの文字列を結合できます。これは**連結**と呼ばれています。

const firstName = "Hanako";
const greeting = "Hi " + firstName;
console.log(greeting); // Hi Hanako

'Hi ' 内のスペースに注目してください。連結は書かれたとおり正確に文字列を接着するため、スペースを忘れると HiHanako になります。テンプレートリテラルは通常、同じ仕事を読みやすくします：`Hi ${firstName}`。

すべての文字列は独自の長さを知っています。.length で尋ねてください。

const firstName = "Hanako";
console.log(firstName.length); // 6

角括弧を使って位置でその位置からカウントして、単一の文字を読むこともできます。

const firstName = "Hanako";
console.log(firstName[0]); // H

最初の文字は位置 0 にあります。1 ではありません。そのゼロベースのカウント数は JavaScript 全体にあるため、今のうちに快適になることは価値があります。

2 つの文字列が + で結合され、これは**連結**と呼ばれる操作です。それは機能しますが、すぐにうるさくなります。すべてのリテラルスペースとセパレーターはクォート内に入力する必要があるためです。

const firstName = "Hanako";
const lastName = "Yamada";
console.log("Hi " + firstName + " " + lastName); // Hi Hanako Yamada

同じ行をテンプレートリテラルとして使用すると、`Hi ${firstName} ${lastName}` になり、これが補間が複数のピースを持つものすべてのデフォルトである理由です。

文字列は .length でそのサイズを報告します。これは文字数です。

const firstName = "Hanako";
console.log(firstName.length); // 6

角括弧でインデックスによって単一の文字を読み、ゼロからカウントするため、firstName[0] は最初の文字で、firstName[5] は 6 文字の文字列の最後です。

const firstName = "Hanako";
console.log(firstName[0]); // H

インデックスはゼロベースです。最初の文字は位置 0 にあります。

文字列は + で結合され、これは**連結**と呼ばれる操作です。これは 2 部分の素早い結合に適していますが、+ がオーバーロードされていることに注意してください。文字列が片側にあると連結され、数値を混ぜるとその数値を文字列に強制するため、'total: ' + 3 は 'total: 3' を与えますが、3 + 3 は 6 を与えます。テンプレートリテラルは常にテキストを生成することで曖昧さを回避します。これは最も簡潔なケースを超えてそれらを優先するもう 1 つの理由です。

.length はメソッドではなくプロパティであるため、括弧なしで読みます。

const label = "Yamada";
console.log(label.length); // 6

角括弧でインデックス作成はゼロベースで、1 文字の文字列を返します。

const label = "Yamada";
console.log(label[0]); // Y

留意すべき 1 つのこと：.length は文字列の基になる単位をカウントしており、必ずしも人間が「文字」と呼ぶもではありません。通常のテキストでは 2 つが一致します。いくつかの絵文字と組み合わされた文字の場合はそうではありません。単一の目に見えるシンボルは複数の単位として格納できるため、'😀'.length は 2 を報告します。それはめったにあなたを噛みませんが、絵文字を持つテキストの「文字」のカウントが外れているように見えるとき、その不一致がなぜなのかです。

Juno結合と測定+ で文字列を結合しますが、独自のスペースを含めることを忘れないでください。または Hi と名前が一緒に実行されます。テンプレートリテラルは通常、同じことに対してクリーナーです。.length を使って文字をカウントし、name[0] のような角括弧を使ってポジションでそれぞれ 1 つを読み、ゼロからカウントします。

Juno結合と測定+ は連結しますが、2 つ以上のピースを持った瞬間にうるさくなるため、テンプレートリテラルは現実的なもすべてに勝ちます。.length は文字をカウントし、括弧がありません。プロパティであるためです。name[0] でインデックス作成はゼロベースであるため、最初の文字は位置 0 にあり、最後は長さマイナス 1 にあります。

Juno結合と測定+ はオーバーロードされています。文字列に何かを加えると連結と強制され、これは静かな驚きの源であるため、テンプレートリテラルに頼ってください。.length はプロパティで、括弧なし。これは格納ユニットをカウントし、常に見える文字ではないため、絵文字は長さ 2 を報告できます。その間隙は Unicode でのみ表示されますが、それはそれがあなたを混乱させる前に知る価値があります。

便利な文字列メソッド

文字列は組み込みの**メソッド**を備えています。ドットとメソッド名を記述することで文字列に対して実行するアクション。ここにあなたが最も使用するもの。

toUpperCase() と toLowerCase() でケースを変更します。

const firstName = "taro";
console.log(firstName.toUpperCase()); // TARO

includes() で 1 つのテキストが別のテキストの中に現れるかどうかをチェックします。これは true または false で答えます。

const message = "Welcome back";
console.log(message.includes("back")); // true

slice() で文字列の一部をカットアウトし、開始位置と停止位置を指定します。trim() で端の迷子なスペースをクリーンアップ。replace() でテキストの 1 つのピースを別のピースに交換します。

const raw = "  Hello  ";
console.log(raw.trim()); // Hello

const message = "Hi Yuki";
console.log(message.replace("Yuki", "Sakura")); // Hi Sakura

多くのより多くの文字列メソッドがあり、あなたはそれらを記憶する必要はありません。これらの 5 つを学び、仕事がそれらを要求するとき、残りを見ます。

文字列は**メソッド**を持ってきます。ドットで文字列に呼び出す関数。少数が日常の仕事のほとんどをカバーしています。

toUpperCase() と toLowerCase() はケースを変更します。これはユーザーが入力したテキストを比較するのに便利です。大文字化を心配せずに。includes() は、1 つの文字列が別の文字列の中に現れるかどうかのブール値を返します。

const email = "[email protected]";
console.log(email.toLowerCase().includes("@site.com")); // true

slice(start, end) は開始インデックスから終了インデックスまで（終了インデックスを含まない）セクションを引き出します。trim() は両端からホワイトスペースを削除します。ほぼすべてのユーザー入力で必要です。replace() はテキストの最初の一致を別のテキストに交換します。

const raw = "  order-2024  ";
const clean = raw.trim(); // 'order-2024'
console.log(clean.slice(0, 5)); // order
console.log(clean.replace("order", "invoice")); // invoice-2024

これら 5 つが労働力です。多くの以上のものが存在するため、それらがカバーしないものに当たったときは参照に到達してください。ただし、これらに頼ることを期待してください。

文字列は大きな**メソッド**セットを公開します。ドットで値に呼び出す関数。小さなコアが負荷のほとんどを持ちます。ケースの場合は toUpperCase() / toLowerCase()、ブール値の部分文字列チェックの場合は includes()、セクション抽出の場合は slice(start, end)（開始包括、終了排他、および負はゴードから数えます）、周辺のホワイトスペースをストリップの場合は trim()、置換の場合は replace()。

それらを一緒に結ぶプロパティは：文字列メソッドは元のものを決して変更しません。新しい文字列を返します。文字列は不変です。つまり、文字列値は現場では変更できませんので、すべてのメソッドはあなたに新しい文字列を提供し、ソースを触れないままにしていきます。

const raw = "  Taro Yamada  ";
const cleaned = raw.trim().toLowerCase();
console.log(cleaned); // taro yamada
console.log(raw); // '  Taro Yamada  '  (unchanged)

結果はそれ自体が文字列であるため、メソッドは上記の trim().toLowerCase() が示すようにチェーンしています。2 つの極端なケースは価値があります。replace() はあなたがそれらすべてを求めない限り最初の一致のみをスワップし、終了の過去のインデックス作成は undefined ではなくエラーを返すため、raw[999] は undefined で、クラッシュではありません。その沈黙の undefined は、後でクリアな失敗ではなく、混乱した結果として浮上する傾向があるものです。

Juno便利な文字列メソッド メソッドはドットで文字列に実行するアクションです。toUpperCase()、includes() のはい/いいえチェック、slice() は部分をカットアウト、trim() は迷子なスペースを削除、replace() はテキストを交換。たくさんのより多くがあるため、これら 5 つを学んで、必要なときに残りを見ます。

Juno便利な文字列メソッド 5 つに頼ります。ケースの場合は toUpperCase() と toLowerCase()、ブール値チェックの場合は includes()、抽出の場合は slice(start, end)（終了は含まれません）、ユーザー入力の場合は trim()、最初の一致の場合は replace()。多くのより多くが存在するため、これら以上を見ます。ただし、これらはほとんどの日をカバーしています。

Juno便利な文字列メソッド コア 5 は toUpperCase/toLowerCase、includes、slice、trim、replace です。そして、文字列は不変のため、すべての新しい文字列を返すため、結果はチェーンし、元のは決して変わりません。2 つのトラップ：replace はデフォルトでのみ最初の一致をヒットし、終了の過去のインデックス作成は、クリアなクラッシュではなく、後で謎の結果として表示する傾向のある undefined を与えます。

文字列はどこへ行くのか

文字列は JavaScript のコア構築ブロックの 1 つであり、あなたは今、重要なピースを持っています。引用符またはテンプレートリテラルで作成し、結合して測定し、常に何か新しいものを返すメソッドで再形成します。ここで使用したドットとメソッドパターンは他のタイプに再度表示されます。特に配列メソッドでリストを操作し始めるとき。

テキストはめったに単独で移動しません。カウント、価格、または合計を表示する瞬間、あなたは文字列を数値と混ぜています。テンプレートリテラルは 2 つを清潔に一緒にステッチする方法です。