JavaScriptで文字列をインデックス付け、分割、および操作する方法

前書き

stringは、文字、数字、または記号で構成される1つ以上の文字のシーケンスです。 JavaScript文字列の各文字にはインデックス番号でアクセスでき、すべての文字列にはメソッドとプロパティが用意されています。

このチュートリアルでは、文字列プリミティブとStringオブジェクトの違い、文字列のインデックス付け方法、文字列内の文字へのアクセス方法、および文字列で使用される一般的なプロパティとメソッドについて学習します。

文字列プリミティブと文字列オブジェクト

最初に、2種類の文字列を明確にします。 JavaScriptは、不変のデータ型であるstring primitiveStringオブジェクトを区別します。

2つの違いをテストするために、文字列プリミティブと文字列オブジェクトを初期化します。

// Initializing a new string primitive
const stringPrimitive = "A new string.";

// Initializing a new String object
const stringObject = new String("A new string.");

typeof演算子を使用して、値のタイプを判別できます。 最初の例では、単純に変数に文字列を割り当てました。

typeof stringPrimitive;
Outputstring

2番目の例では、new String()を使用して文字列オブジェクトを作成し、それを変数に割り当てました。

typeof stringObject;
Outputobject

ほとんどの場合、文字列プリミティブを作成します。 JavaScriptは、作成した文字列プリミティブを実際にオブジェクトに変更することなく、Stringオブジェクトラッパーの組み込みプロパティとメソッドにアクセスして利用できます。

この概念は最初は少し難しいですが、プリミティブとオブジェクトの違いに注意する必要があります。 基本的に、すべての文字列で使用できるメソッドとプロパティがあり、バックグラウンドでJavaScriptはオブジェクトへの変換を実行し、メソッドまたはプロパティが呼び出されるたびにプリミティブに戻ります。

文字列のインデックス方法

文字列内の各文字は、0で始まるインデックス番号に対応します。

実例を示すために、値がHow are you?の文字列を作成します。

H o w a r e y o u ?

0

1

2

3

4

5

6

7

8

9

10

11

文字列の最初の文字はHで、これはインデックス0に対応します。 最後の文字は?で、これは11に対応します。 空白文字には、37にインデックスもあります。

文字列内のすべての文字にアクセスできることは、文字列を操作および操作するためのさまざまな方法を提供します。

キャラクターへのアクセス

How are you?文字列を使用して文字とインデックスにアクセスする方法を示します。

"How are you?";

角括弧表記を使用して、文字列内の任意の文字にアクセスできます。

"How are you?"[5];
Outputr

charAt()メソッドを使用して、インデックス番号をパラメーターとして使用して文字を返すこともできます。

"How are you?".charAt(5);
Outputr

または、indexOf()を使用して、文字の最初のインスタンスごとにインデックス番号を返すこともできます。

"How are you?".indexOf("o");
Output1

「o」はHow are you?文字列に2回表示されますが、indexOf()は最初のインスタンスを取得します。

lastIndexOf()は、最後のインスタンスを見つけるために使用されます。

"How are you?".lastIndexOf("o");
Output9

これらの方法の両方で、文字列内の複数の文字を検索することもできます。 インスタンスの最初の文字のインデックス番号を返します。

"How are you?".indexOf("are");
Output4

一方、slice()メソッドは、2つのインデックス番号の間の文字を返します。 最初のパラメーターは開始インデックス番号であり、2番目のパラメーターは終了するインデックス番号です。

"How are you?".slice(8, 11);
Outputyou

11?ですが、?は返される出力の一部ではないことに注意してください。 slice()は、最後のパラメーターの間にあるものを返しますが、最後のパラメーターは含まれません。

2番目のパラメーターが含まれていない場合、slice()はパラメーターから文字列の終わりまですべてを返します。

"How are you?".slice(8);
Outputyou?

要約すると、charAt()slice()はインデックス番号に基づいて文字列値を返すのに役立ち、indexOf()lastIndexOf()は逆に、指定された文字列文字に基づいてインデックス番号を返します。 。

文字列の長さを見つける

lengthプロパティを使用して、文字列の文字数を返すことができます。

"How are you?".length;
Output12

lengthプロパティは、0で始まり11で終わる最終的なインデックス番号ではなく、1で始まり12になる実際の文字数を返すことに注意してください。

大文字または小文字への変換

2つの組み込みメソッドtoUpperCase()toLowerCase()は、JavaScriptでテキストをフォーマットし、テキストを比較するのに役立つ方法です。

toUpperCase()は、すべての文字を大文字に変換します。

"How are you?".toUpperCase();
OutputHOW ARE YOU?

toLowerCase()は、すべての文字を小文字に変換します。

"How are you?".toLowerCase();
Outputhow are you?

これら2つのフォーマット方法は、追加のパラメーターを取りません。

これらのメソッドは元の文字列を変更しないことに注意してください。

文字列の分割

JavaScriptには、文字列を文字で分割し、セクションから新しいarrayを作成するための非常に便利な方法があります。 split()メソッドを使用して、" "で表される空白文字で配列を区切ります。

const originalString = "How are you?";

// Split string by whitespace character
const splitString = originalString.split(" ");

console.log(splitString);
Output[ 'How', 'are', 'you?' ]

splitString変数に新しい配列ができたので、インデックス番号を使用して各セクションにアクセスできます。

splitString[1];
Outputare

空のパラメーターを指定すると、split()は、文字列内の各文字を含むコンマ区切りの配列を作成します。

文字列を分割することで、文に含まれる単語の数を特定し、この方法を使用して、たとえば人の名と姓を特定できます。

空白のトリミング

JavaScriptのtrim()メソッドは、文字列の両端から空白を削除しますが、その間のどこにも削除しません。 空白はタブまたはスペースです。

const tooMuchWhitespace = "     How are you?     ";

const trimmed = tooMuchWhitespace.trim();

console.log(trimmed);
OutputHow are you?

trim()メソッドは、余分な空白を削除する一般的なタスクを実行する簡単な方法です。

文字列値の検索と置換

文字列で値を検索し、replace()メソッドを使用して新しい値に置き換えることができます。 最初のパラメーターは検出される値になり、2番目のパラメーターはそれを置き換える値になります。

const originalString = "How are you?"

// Replace the first instance of "How" with "Where"
const newString = originalString.replace("How", "Where");

console.log(newString);
OutputWhere are you?

値を別の文字列値に置き換えることができることに加えて、Regular Expressionsを使用してreplace()をより強力にすることもできます。 たとえば、replace()は最初の値にのみ影響しますが、g(グローバル)フラグを使用して値のすべてのインスタンスをキャッチし、i(大文字と小文字を区別しない)フラグを使用して無視することができます場合。

const originalString = "Javascript is a programming language. I'm learning javascript."

// Search string for "javascript" and replace with "JavaScript"
const newString = originalString.replace(/javascript/gi, "JavaScript");

console.log(newString);
OutputJavaScript is a programming language. I'm learning JavaScript.

これは、正規表現を使用する非常に一般的なタスクです。 Regexrにアクセスして、正規表現のその他の例を練習してください。

結論

文字列は、最も頻繁に使用されるデータ型の1つであり、文字列でできることはたくさんあります。

このチュートリアルでは、文字列プリミティブとStringオブジェクトの違い、文字列のインデックス作成方法、文字列の組み込みメソッドとプロパティを使用して文字にアクセスし、テキストをフォーマットし、値を検索して置換する方法を学習しました。 。

文字列の一般的な概要については、チュートリアル「https://www.digitalocean.com/community/tutorials/how-to-work-with-strings-in-javascript[JavaScriptで文字列を操作する方法]」を参照してください。