JavaScript string(文字列):変数のデータ型

2023年4月18日

English version.

JavaScriptのstring型は、文字列を表現するためのデータ型です。文字列は、ダブルクォート("")またはシングルクォート('')で囲まれた文字列リテラルとして表現されます。

以下は、文字列リテラルの例です。

let message = "Hello, world!";
let name = 'Alice';

クォートの使い分け

ダブルクォート("")とシングルクォート('')は、文字列リテラルの作成方法の中で最も一般的なものです。基本的に、どちらを使うかは好みやチームのコーディング規約によるものですが、一部の開発者は、一貫して一方を使うことを好む傾向があります。

ただし、文字列リテラル内に引用符を含める必要がある場合、引用符と同じ種類の引用符で文字列リテラルを囲み、異なる種類の引用符をエスケープする必要があります。

例えば、ダブルクォートで文字列リテラルを作成した場合、文字列リテラル内にシングルクォートを含める場合は、シングルクォートをエスケープする必要があります。

let message = "He said, \"I'm a programmer.\"";

同様に、シングルクォートで文字列リテラルを作成した場合、ダブルクォートを含める場合は、ダブルクォートをエスケープする必要があります。

let message = 'He said, "I\'m a programmer."';

文字列の作成方法

文字列を作成する方法はいくつかあります。以下に、文字列を作成するための主な方法を示します。

文字列リテラル

文字列リテラルは、引用符で囲まれた文字列のことで、ダブルクォーテーション("")またはシングルクォーテーション('')で囲まれます。

let greeting = "Hello, world!";

let message = 'I\'m a JavaScript developer.';

文字列リテラル内に引用符を含める場合、エスケープ文字「\」を使用してエスケープする必要があります。

Stringコンストラクター

文字列を作成する別の方法は、Stringコンストラクターを使用することです。

let str1 = new String("Hello, world!");
let str2 = new String('I\'m a JavaScript developer.');

ただし、通常は文字列リテラルを使用することが推奨されます。

バッククォート(テンプレートリテラル)

ES6(ECMAScript 2015)以降、バッククォート記号(``)を使用して、テンプレートリテラルと呼ばれる特別な種類の文字列を作成できるようになりました。テンプレートリテラルは、変数の値や式を埋め込むことができ、改行も文字列内に含めることができます。

テンプレートリテラル内には、変数名や式を${}で囲んで埋め込むことができます。

let name = "Alice";
let age = 25;
let message = `My name is ${name} and I am ${age} years old.`;

代表的な文字列操作

文字列の連結

+演算子

let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;
console.log(fullName); // John Doe

concat()

let firstName = "John";
let lastName = "Doe";
let fullName = firstName.concat(" ", lastName);
console.log(fullName); // John Doe

テンプレートリテラル

let firstName = "John";
let lastName = "Doe";
let fullName = `${firstName} ${lastName}`;
console.log(fullName); // John Doe

joinメソッド

joinメソッドを使用すると、配列の要素を指定した区切り文字で連結することができます。

let fruits = ["apple", "banana", "orange"];
let fruitString = fruits.join(", ");
console.log(fruitString); // apple, banana, orange

文字列の長さを取得

文字列の長さを取得する方法は、lengthプロパティを使用することです。このプロパティを使用すると、文字列の長さを取得することができます。

以下は例です。

let str = "Hello, World!";
console.log(str.length); // 13

この例では、文字列"Hello, World!"の長さを取得しています。lengthプロパティによって、文字列に含まれる文字の数が返されます。

注意点としては、lengthプロパティは、文字列に含まれるUnicode文字の数を返すため、日本語や絵文字など、マルチバイト文字を含む文字列の場合は、期待通りの値が返されない場合があることです。

文字列の分割

.文字列を分割するには、split()メソッドを使用します。split()メソッドは、指定された区切り文字に基づいて文字列を分割し、分割された文字列を配列に格納して返します。

以下は例です。

let str = "apple,banana,orange";
let fruits = str.split(",");
console.log(fruits); // ["apple", "banana", "orange"]

この例では、split()メソッドを使用して、区切り文字,に基づいて文字列"apple,banana,orange"を分割しています。split()メソッドによって、配列fruitsに分割された各文字列が格納されています。

また、split()メソッドは正規表現を使用して文字列を分割することもできます。たとえば、空白文字を区切り文字として使用する場合は、以下のように書くことができます。

let str = "apple banana orange";
let fruits = str.split(/\s+/);
console.log(fruits); // ["apple", "banana", "orange"]

この例では、正規表現\s+を使用して、空白文字を区切り文字として文字列を分割しています。

文字列の抽出

JavaScriptでは、文字列から部分文字列を抽出するために、substring()substr()slice()の3つのメソッドが用意されています。これらのメソッドは、文字列の抽出によく使用されます。違いは、開始位置と終了位置を指定する方法、または長さを指定する方法にあります。

substring()

substring()メソッドは、指定された開始位置から終了位置の前までの部分文字列を返します。開始位置と終了位置は、文字列のインデックス(位置)で指定します。開始位置が終了位置よりも大きい場合は、自動的に交換されます。また、終了位置を省略すると、文字列の末尾まで抽出されます。

以下は例です。

let str = "Hello, World!";
let result = str.substring(7, 12);
console.log(result); // "World"

substr()

substr()メソッドは、指定された開始位置から指定された長さの部分文字列を返します。開始位置は、文字列のインデックス(位置)で指定します。長さを省略すると、開始位置から末尾までの部分文字列が返されます。

以下は例です。

let str = "Hello, World!";
let result = str.substr(7, 5);
console.log(result); // "World"

slice()

slice()メソッドは、指定された開始位置から終了位置の前までの部分文字列を返します。開始位置と終了位置は、文字列のインデックス(位置)で指定します。また、終了位置を省略すると、文字列の末尾まで抽出されます。また、負の数を指定すると、文字列の末尾からの位置として解釈されます。

以下は例です。

let str = "Hello, World!";
let result = str.slice(7, 12);
console.log(result); // "World"

文字列の置換

replace()

文字列の置換は、replace()メソッドを使って行うことができます。replace()メソッドは、指定した文字列パターンを別の文字列で置き換えた新しい文字列を返します。ただし、最初に一致したパターンのみが置換されます。

次の例では、文字列strの中の最初に見つかった"world"を"universe"に置換しています。

let str = "Hello, world!";
let result = str.replace("world", "universe");
console.log(result); // "Hello, universe!"

この例では、最初に見つかった"world"のみが置換されています。また、元の文字列strは変更されず、新しい文字列がresultに代入されます。

replace()メソッドは、正規表現を使ってパターンを指定することもできます。次の例では、正規表現を使って文字列strの中のすべての数字を"X"に置換しています。

let str = "12345";
let result = str.replace(/\d/g, "X");
console.log(result); // "XXXXX"

この例では、\dという正規表現パターンを使って、すべての数字に一致する文字列を指定しています。gフラグは、マッチするすべての文字列に対して置換を行うために必要です。

replaceAll()

replaceAll()は、文字列内のすべての部分文字列を置換するためのECMAScript 2021で導入されたメソッドです。

次の例では、文字列str内のすべての"world"を"universe"に置換しています。

let str = "Hello, world! Hello, world!";
let result = str.replaceAll("world", "universe");
console.log(result); // "Hello, universe! Hello, universe!"

この例では、"world"のすべての出現箇所が"universe"に置換され、元の文字列strは変更されません。置換後の新しい文字列は、result変数に格納されます。

大文字・小文字の変換

toUpperCase()

toUpperCase()メソッドは、文字列のすべての文字を大文字に変換します。例えば、以下のコードはstr変数の文字列をすべて大文字に変換します。

let str = "Hello, World!";
let result = str.toUpperCase();
console.log(result); // "HELLO, WORLD!"

toLowerCase()

toLowerCase()メソッドは、文字列のすべての文字を小文字に変換します。例えば、以下のコードはstr変数の文字列をすべて小文字に変換します。

let str = "Hello, World!";
let result = str.toLowerCase();
console.log(result); // "hello, world!"

文字列のトリミング

JavaScriptには、文字列の前後にある空白を除去するトリミング用のメソッドが用意されています。空白文字には、スペース、タブ、改行が含まれます。これらのメソッドは、特にユーザーからの入力を受け取る場合に文字列の前後にある空白を除去するのに役立ちます。

trim()

trim() メソッドは、文字列の先頭と末尾にある空白を除去します。例えば、以下のコードは str 変数の前後にある空白を除去します。

let str = "   Hello, World!    "
let result = str.trim();
console.log(result); // "Hello, World!"

trimStart()

trimStart() メソッドは、文字列の先頭にある空白を除去します。例えば、以下のコードは str 変数の先頭にある空白を除去します。

let str = "   Hello, World!";
let result = str.trimStart();
console.log(result); // "Hello, World!"

trimEnd()

trimEnd() メソッドは、文字列の末尾にある空白を除去します。例えば、以下のコードは str 変数の末尾にある空白を除去します。

let str = "Hello, World!    ";
let result = str.trimEnd();
console.log(result); // "Hello, World!"

文字列の検索

JavaScriptには、文字列内でパターンを検索するための組み込み関数があります。以下に、よく使われる文字列検索関数を説明します。

indexOf()

JavaScriptのindexOf()メソッドは、文字列内で指定された部分文字列が最初に現れるインデックスを返します。もし部分文字列が見つからない場合は、-1を返します。

indexOf()は、次のように使用します:

const str = "The quick brown fox jumps over the lazy dog.";
console.log(str.indexOf("fox")); // 16
console.log(str.indexOf("cat")); // -1

上記の例では、文字列"The quick brown fox jumps over the lazy dog."の中で最初に部分文字列"fox"が現れるインデックスは16です。また、部分文字列"cat"は見つからないので-1が返されます。

indexOf()は、指定した文字列の先頭から検索を開始し、最初に見つかった場所のインデックスを返します。もし同じ部分文字列が複数回出現する場合は、最初に見つかった場所のインデックスが返されます。また、大文字と小文字が区別されますので、部分文字列が大文字である場合は、検索対象の文字列も大文字である必要があります。

lastIndexOf()

JavaScriptのlastIndexOf()メソッドは、文字列内で指定された部分文字列が最後に現れるインデックスを返します。もし部分文字列が見つからない場合は、-1を返します。

lastIndexOf()は、次のように使用できます:

const str = "The quick brown fox jumps over the lazy dog.";
console.log(str.lastIndexOf("o")); // 41
console.log(str.lastIndexOf("cat")); // -1

上記の例では、文字列"The quick brown fox jumps over the lazy dog."の中で最後に文字"o"が現れるインデックスは41です。また、部分文字列"cat"は見つからないので-1が返されます。

lastIndexOf()は、指定した文字列の末尾から検索を開始し、最後に見つかった場所のインデックスを返します。もし同じ部分文字列が複数回出現する場合は、最後に見つかった場所のインデックスが返されます。また、大文字と小文字が区別されますので、部分文字列が大文字である場合は、検索対象の文字列も大文字である必要があります。

search()

JavaScriptのsearch()メソッドは、指定された正規表現に一致する文字列の最初のインデックスを返します。もし一致する文字列が見つからない場合は、-1を返します。

search()は、次のように使用できます:

const str = "The quick brown fox jumps over the lazy dog.";
console.log(str.search(/fox/)); // 16
console.log(str.search(/cat/)); // -1

上記の例では、文字列"The quick brown fox jumps over the lazy dog."の中で正規表現/fox/に一致する文字列が最初に現れるインデックスは16です。また、正規表現/cat/に一致する文字列は見つからないので-1が返されます。

search()は、指定した正規表現に一致する文字列の最初のインデックスを返します。もし同じ文字列が複数回出現する場合は、最初に見つかった場所のインデックスが返されます。

search()は、indexOf()と似たような使い方ができますが、indexOf()は文字列を検索する際に正規表現を使うことはできません。一方、search()は正規表現による検索ができます。

match()

match()は、指定された正規表現に一致する文字列を配列として返します。

正規表現のフラグgを使用すると、文字列内で複数回一致する場合にすべての一致箇所を配列として返します。

フラグiを使用すると、大文字と小文字を区別せずに一致する文字列を検索します。

JavaScriptのmatch()メソッドは、指定された正規表現に一致する文字列を検索し、配列として返します。

gフラグが含まれない場合、最初にマッチした文字列を含む配列が返されます。もし一致する文字列が見つからない場合は、nullが返されます。

match()は、次のように使用できます:

const str = "The quick brown fox jumps over the lazy dog.";
console.log(str.match(/fox/)); // ["fox", index: 16, input: "The quick brown fox jumps over the lazy dog.", groups: undefined]
console.log(str.match(/o/g)); // ["o", "o", "o", "o"]
console.log(str.match(/cat/)); // null

startsWith()

JavaScriptの文字列操作のstartsWith()メソッドは、文字列が指定された文字列または文字で始まるかどうかを判定するために使用されます。指定された文字列または文字で始まる場合、真(true)が返され、それ以外の場合は偽(false)が返されます(ブール値)。以下は、startsWith()メソッドを使った例です。

const str = "Hello, world!";
console.log(str.startsWith("Hello")); // true
console.log(str.startsWith("World")); // false
console.log(str.startsWith("Hello,")); // true
console.log(str.startsWith("He")); // true
console.log(str.startsWith("hello")); // false

上記の例では、startsWith()メソッドが使用されて、指定された文字列または文字で始まるかどうかが判定されています。startsWith()メソッドは、大文字と小文字を区別するため、"World""hello"のような別の文字列を指定すると、正しい結果が得られないことに注意してください。

また、startsWith()メソッドは、第2引数として、検索を開始する位置を指定することができます。これは、文字列の一部分だけを検索する場合に便利です。以下は、startsWith()メソッドを使って、文字列の一部分から検索を開始する例です。

const str = "The quick brown fox jumps over the lazy dog.";
console.log(str.startsWith("brown", 10)); // true
console.log(str.startsWith("lazy", 30)); // true

上記の例では、startsWith()メソッドに2番目の引数として、検索を開始する位置が渡されています。"brown"は、インデックス10から始まる部分文字列に含まれているため、trueが返されます。同様に、"lazy"は、インデックス30から始まる部分文字列に含まれているため、trueが返されます。

endsWith()

JavaScriptの文字列操作のendsWith()メソッドは、文字列が指定された文字列または文字で終わるかどうかを判定するために使用されます。指定された文字列または文字で終わる場合、真(true)が返され、それ以外の場合は偽(false)が返されます(ブール値)。以下は、endsWith()メソッドを使った例です。

const str = "Hello, world!";
console.log(str.endsWith("world!")); // true
console.log(str.endsWith("Hello")); // false
console.log(str.endsWith("ld!")); // true
console.log(str.endsWith("o")); // false
console.log(str.endsWith("ld")); // false

上記の例では、endsWith()メソッドが使用されて、指定された文字列または文字で終わるかどうかが判定されています。endsWith()メソッドは、大文字と小文字を区別するため、"World!""LD!"のような別の文字列を指定すると、正しい結果が得られないことに注意してください。

また、endsWith()メソッドは、第2引数として、検索を終了する位置を指定することができます。これは、文字列の一部分だけを検索する場合に便利です。以下は、endsWith()メソッドを使って、文字列の一部分から検索を終了する例です。

const str = "The quick brown fox jumps over the lazy dog.";
console.log(str.endsWith("brown", 15)); // true
console.log(str.endsWith("dog.", str.length)); // true

上記の例では、endsWith()メソッドに2番目の引数として、検索を終了する位置が渡されています。"brown"は、15文字目(インデックス14)までの部分文字列に含まれているため、trueが返されます。同様に、"dog."は、文字列の末尾にあるため、str.lengthを指定して検索を終了すると、trueが返されます。

includes()

includes()メソッドは、指定された文字列が現在の文字列に含まれているかどうかを判断するために使用されます。このメソッドは、ブール値を返します。

例えば、次のようなコードを使用して、文字列が特定の部分文字列を含んでいるかどうかを確認できます。

let str = "Hello, World!";
console.log(str.includes("Hello")); // true
console.log(str.includes("world")); // false

このメソッドは、大文字小文字を区別します。したがって、上記の例では、"world"の代わりに"World"を指定した場合、メソッドはtrueを返します。

また、includes()メソッドは、第2引数を指定することで、検索を開始する位置を指定することもできます。この場合、指定された位置から検索が開始されます。

例えば、次のようにして、文字列の最初の5文字を無視して、指定された部分文字列が含まれているかどうかを確認できます。

let str = "Hello, World!";
console.log(str.includes("World", 5)); // true

上記の例では、5番目の位置から検索が開始されているため、"World"が見つかりました。

---

関連記事

JavaScriptの記事一覧