概要: このチュートリアルでは、JavaScriptのString型と、文字列を効果的に操作する方法について学習します。
JavaScriptの文字列型入門
String型は、オブジェクトであり、プリミティブな文字列型のラッパーです。これは、以下のようにStringコンストラクタを使用して作成できます。
let str = new String('JavaScript String Type');Code language: JavaScript (javascript)String型には、文字列内の文字数を指定するlengthというプロパティがあります。
console.log(str.length); // 22Code language: JavaScript (javascript)この例では、lengthプロパティの値は22で、これは文字列'JavaScript String Type'の文字数でもあります。
プリミティブな文字列の値を取得するには、Stringオブジェクトの以下のメソッドのいずれかを使用します: valueOf(), toString(), および toLocaleString()。
console.log(str.valueOf());
console.log(str.toString());
console.log(str.toLocaleString());Code language: CSS (css)文字列内の個々の文字にアクセスするには、数値インデックスを使用して角括弧表記[]を使用します。最初の文字のインデックスは、この例に示すようにゼロです。
console.log(str[0]); // JCode language: JavaScript (javascript)角括弧表記はES5で導入されました。ES5より前は、より冗長なcharAt()メソッドを使用していました。
console.log(str.charAt(0)); // JCode language: JavaScript (javascript)プリミティブな文字列変数または文字列リテラルに対してメソッドを呼び出すと、その文字列はString型のインスタンスに変換されます。例:
'literal string'.toUpperCase();Code language: JavaScript (javascript)この機能は、JavaScriptにおけるプリミティブラッパー型として知られています。
文字列操作
String型は、文字列を効果的に操作するための多くの便利なメソッドを提供しています。次のセクションで、それぞれのメソッドについて見ていきましょう。
1) 文字列の連結
2つ以上の文字列を連結するには、以下のようにconcat()メソッドを使用します。
let firstName = 'John';
let fullName = firstName.concat(' ','Doe');
console.log(fullName); // "John Doe"
console.log(firstName); // "John"Code language: JavaScript (javascript)concat()メソッドは、2つ以上の文字列を連結し、結果の文字列を返します。concat()メソッドは、元の文字列を変更しないことに注意してください。
concat()メソッドに加えて、文字列を連結するために加算演算子 (+) を使用することもできます。実際には、加算演算子はconcat()メソッドよりも頻繁に使用されます。
let firstName = 'John';
let fullName = firstName + ' ' + 'Doe';
console.log(fullName); // "John Doe"Code language: JavaScript (javascript)2) 部分文字列の抽出
文字列から部分文字列を抽出するには、substr()メソッドを使用します。
substr(startIndex,[length]);Code language: CSS (css)substr()メソッドは2つの引数を受け取ります。
最初の引数startIndexは、文字を抽出する開始位置であり、2番目の引数lengthは、抽出する文字数を指定します。
let str = "JavaScript String";
console.log(str.substr(0, 10)); // "JavaScript"
console.log(str.substr(11,6)); // "String"Code language: JavaScript (javascript)length引数を省略すると、substr()メソッドは文字列の末尾まで文字を抽出します。
開始インデックスと終了インデックスを使用して、文字列から部分文字列を抽出したい場合があります。この場合は、substring()メソッドを使用します。
substring(startIndex,endIndex)次の例を参照してください。
let str = "JavaScript String";
console.log(str.substring(4, 10)); // "Script"Code language: JavaScript (javascript)3) 部分文字列の位置の特定
文字列内の部分文字列の位置を特定するには、indexOf()メソッドを使用します。
string.indexOf(substring,[fromIndex]);Code language: CSS (css)indexOf()メソッドは、検索する部分文字列と、文字列内で前方検索を開始するfromIndexという2つの引数を受け取ります。
indexOf()は、文字列内で部分文字列が最初に出現するインデックスを返します。部分文字列が見つからない場合、indexOf()メソッドは-1を返します。
let str = "This is a string";
console.log(str.indexOf("is")); // 2Code language: JavaScript (javascript)次の例では、fromIndex引数を使用しています。
console.log(str.indexOf('is', 3)); //5Code language: JavaScript (javascript)文字列内で部分文字列が最後に出現する位置を見つけるには、lastIndexOf()メソッドを使用します。
string.lastIndexOf(substring,[fromIndex])Code language: CSS (css)indexOf()メソッドとは異なり、lastindexOf()メソッドはfromIndex引数から後方に向かって検索します。
console.log(str.lastIndexOf('is')); // 5Code language: JavaScript (javascript)lastIndexOf()メソッドも、次の例に示すように、文字列内に部分文字列が見つからない場合は-1を返します。
console.log(str.lastIndexOf('are')); // -1Code language: JavaScript (javascript)4) 空白文字の削除
文字列の先頭と末尾にあるすべての空白文字を削除するには、trim()メソッドを使用します。
let rawString = ' Hi ';
let strippedString = rawString.trim();
console.log(strippedString); // "Hi"Code language: JavaScript (javascript)trim()メソッドは、空白文字が削除された元の文字列のコピーを作成します。元の文字列は変更しないことに注意してください。
ES6では、文字列から空白文字を削除するための2つの新しいメソッドが導入されました。
trimStart()は、文字列の先頭から空白が削除された文字列を返します。trimEnd()は、文字列の末尾から空白が削除された文字列を返します。
5) 大文字/小文字の変更
文字列の大文字/小文字を変更するには、toLowerCase()メソッドとtoUpperCase()メソッドを使用します。
let greeting = 'Hello';
console.log(greeting.toLowerCase()); // 'hello'
console.log(greeting.toUpperCase()); // 'HELLO';Code language: JavaScript (javascript)一部の言語では、文字列を小文字や大文字に変換するためのルールが非常に具体的です。
したがって、特にコードがどの言語を処理するかわからない場合は、toLocaleLowerCase()メソッドとtoLocaleUpperCase()メソッドを使用する方が安全です。
6) 文字列の比較
2つの文字列を比較するには、localeCompare()メソッドを使用します。
first.localeCompare(second);Code language: CSS (css)localeCompare()は、-1、0、および1の3つの値のいずれかを返します。
- 最初の文字列がアルファベット順で2番目の文字列よりも前にある場合、メソッドは-1を返します。
- 最初の文字列がアルファベット順で2番目の文字列よりも後にある場合、メソッドは1を返します。
- 2つの文字列が等しい場合、メソッドは0を返します。
例:
console.log('A'.localeCompare('B')); // -1
console.log('B'.localeCompare('B')); // 0
console.log('C'.localeCompare('B')); // 1Code language: JavaScript (javascript)7) パターンのマッチング
match()メソッドを使用すると、指定された正規表現と文字列を照合して、結果の配列を取得できます。
match()メソッドは、一致するものが見つからない場合はnullを返します。それ以外の場合は、一致全体と、括弧でキャプチャされた一致結果を含む配列を返します。
グローバルフラグ（g）が設定されていない場合、配列の要素ゼロには一致全体が含まれます。以下に例を示します。
let expression = '1 + 2 = 3';
let matches = expression.match(/\d+/);
console.log(matches[0]); // "1"Code language: JavaScript (javascript)出力
1この例では、パターンはexpression文字列内の任意の数値に一致します。
グローバルフラグ（g）が設定されている場合、結果の配列の要素には、次のようにすべての一致が含まれます。
let expression = '1 + 2 = 3';
let matches = expression.match(/\d+/g);
for (const match of matches) {
console.log(match);
}Code language: JavaScript (javascript)出力
1
2
3この例では、matches配列には、expression文字列内の1、2、および3を含むすべての一致が含まれています。
文字列が正規表現に一致するかどうかだけを調べる必要がある場合は、代わりにsearch()メソッドを使用します。
match()メソッドと同様に、search()メソッドは正規表現を受け取り、最初の一致が見つかった文字列の位置を返します。一致が見つからない場合は、-1を返します。
let str = "This is a test of search()";
let pos = str.search(/is/);
console.log(pos); // 2Code language: JavaScript (javascript)8) 部分文字列の置換
文字列内の部分文字列を置換するには、replace()メソッドを使用します。
string.replace(regularExpression, replaceText)Code language: CSS (css)replace()メソッドの最初の引数は、正規表現または文字列にすることができます。正規表現の場合、replace()メソッドは一致するものを見つけ、それらを2番目の引数（replaceText）で置換します。文字列の場合、replace()メソッドは厳密な検索を実行し、置換を実行します。
replace()メソッドは、置換が行われた後の元の文字列のコピーを返します。
次の例は、正規表現を使用してtheをaに置換する方法を示しています。
let str = "the baby kicks the ball";
// replace "the" with "a"
let newStr = str.replace(/the/g, "a");
console.log(newStr); // "a baby kicks a ball"
console.log(str); // "the baby kicks the ball"Code language: JavaScript (javascript)次の例は、最初の引数をリテラル文字列として使用して、kicksをholdsに置換する方法を示しています。
newStr = str.replace('kicks', 'holds');
console.log(newStr); // "the baby holds the ball"Code language: JavaScript (javascript)このチュートリアルでは、JavaScriptの文字列型と文字列を効果的に操作する方法について学習しました。
