JavaScriptにおける文字列のインデックス、分割、操作方法

紹介

文字列は、文字、数字、または記号からなる1つ以上の文字のシーケンスです。JavaScriptの文字列内の各文字はインデックス番号でアクセスでき、すべての文字列には利用できるメソッドとプロパティがあります。

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

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

まず、2つのタイプの文字列を明確にします。JavaScriptは、変更不可能なデータ型である文字列プリミティブと、Stringオブジェクトを区別します。

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

// 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;

string

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

typeof stringObject;

object

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

この概念は最初は少し難しいかもしれませんが、プリミティブとオブジェクトの違いを理解しておく必要があります。基本的に、すべての文字列に利用可能なメソッドとプロパティがあります。そして、バックグラウンドでは、JavaScriptはメソッドやプロパティが呼ばれるたびにオブジェクトへの変換とプリミティブへの変換を行います。

文字列のインデックスの付け方

文字列のそれぞれの文字は、0から始まるインデックス番号に対応しています。

実演するために、How are you?という値を持つ文字列を作成します。

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

文字列内のすべての文字にアクセスできることは、文字列を操作する方法をいくつも提供してくれます。

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

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

"How are you?";

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

"How are you?"[5];

r

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

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

r

あるいは、indexOf()を使って、文字の最初のインスタンスによるインデックス番号を返すことができます。

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

1

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

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

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

9

これらの2つのメソッドの両方では、文字列内の複数の文字を検索することもできます。インスタンス内の最初の文字のインデックス番号が返されます。

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

4

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

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

you

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

第二のパラメータが含まれていない場合、slice()はそのパラメータから文字列の最後までのすべてを返します。

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

you?

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

文字列の長さを求める

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

"How are you?".length;

12

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

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

組み込みの二つのメソッド toUpperCase() と toLowerCase() は、テキストをフォーマットし、JavaScriptにおけるテキストの比較を行うために役立ちます。

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

"How are you?".toUpperCase();

HOW ARE YOU?

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

"How are you?".toLowerCase();

how are you?

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

これらの方法は元の文字列を変更しないことに注意する価値があります。

文字列を分割する

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

const originalString = "How are you?";

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

console.log(splitString);

[ 'How', 'are', 'you?' ]

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

splitString[1];

are

空のパラメータが与えられると、split() は文字列内の各文字を含むカンマ区切りの配列を作成します。

文字列を分割することで、文中の単語数を特定でき、例えば人々の名前や姓を特定する手段としてこの方法を使用できます。

空白をトリミングする

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

const tooMuchWhitespace = "     How are you?     ";

const trimmed = tooMuchWhitespace.trim();

console.log(trimmed);

How 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);

Where are you?

値を別の文字列値で置き換えることができるだけでなく、正規表現を使用して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);

JavaScript is a programming language. I'm learning JavaScript.

これは正規表現を利用した非常に一般的な作業です。Regexrを訪れて、正規表現の他の例を練習してください。

結論

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

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

文字列についてのより一般的な概要を知りたい場合は、「JavaScriptで文字列を扱う方法」というチュートリアルを読んでください。