JavaScriptの文字列メソッド

文字列の方法はあなたが文字列を処理するのに役立ちます。

文字列の方法と属性

原始値、例えば「Bill Gates」は属性や方法を持つことができません(なぜならそれらはオブジェクトではないからです)。

しかしJavaScriptでは、方法や属性は原始値にも使用できます。なぜなら、方法や属性を実行する際にJavaScriptは原始値をオブジェクトとして扱うからです。

文字列の長さ

length 属性は文字列の長さを返します:

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

実際に試してみる

文字列内の文字列を検索

indexOf() 方法は指定されたテキストが文字列内にある場所を返します:最初出現するインデックス(位置):

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");

実際に試してみる

JavaScript は位置を 0から計算します。

0 は文字列内の最初の場所、1 は第二、2 は第三 ...

lastIndexOf() 方法は指定されたテキストが文字列内の位置を返します:最後一度の出現するインデックス:

var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China");

実際に試してみる

テキストが見つからない場合、 indexOf() および lastIndexOf() どちらも -1 を返します。

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("USA");

実際に試してみる

両方の方法は検索開始位置として第二引数を受け取ります。

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China", 18);

実際に試してみる

lastIndexOf() 方法は後方から検索を行います(末尾から先頭に向かって)、これは次のように意味します:第二引数が 50 であれば、位置 50から検索を開始し、文字列の先頭まで検索します。

var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China", 50);

実際に試してみる

文字列内の文字列を検索

search() 特定の値の文字列を検索し、一致する位置を返す方法:

var str = "The full name of China is the People's Republic of China.";
var pos = str.search("locate");

実際に試してみる

お気づきですか?

两种方法,indexOf()search()等しい

これらの二つの方法は等しくありません。違いは:

  • search()メソッドは第二の開始位置引数を設定できません。
  • indexOf()メソッドはより強力な検索値(正規表現)を設定できません。

あなたは正規表現の章でこれらのより強力な検索値について学びます。

文字列の一部を抽出する

文字列の一部を抽出する方法が三種類あります:

  • slice(start, end)
  • substring(start, end)
  • substr(start, length)

slice()メソッド

slice() 特定の文字列の部分を取り出し、新しい文字列にその部分を返します。

このメソッドは二つの引数を設定します:開始インデックス(開始位置)、終了インデックス(終了位置)。

この例では、文字列の7から13の位置の部分を切り取ります:

var str = "Apple, Banana, Mango";
var res = str.slice(7,13);

resの結果は:

Banana

実際に試してみる

負の引数があれば、文字列の末尾から数えます。

この例では、文字列の-12から-6の位置の部分を切り取ります:

var str = "Apple, Banana, Mango";
var res = str.slice(-13,-7);

resの結果は:

Banana

実際に試してみる

第二引数を省略すると、このメソッドは文字列の残りの部分を切り取ります:

var res = str.slice(7);

実際に試してみる

または末尾から数えて:

var res = str.slice(-13);

実際に試してみる

ヒント:負のインデックス位置はInternet Explorer 8およびそれ以前のバージョンでは適用されません。

substring()メソッド

substring() 似ている slice()

違いは、 substring() 負のインデックスを受け入れません。

var str = "Apple, Banana, Mango";
var res = str.substring(7,13);

resの結果は:

Banana

実際に試してみる

第二引数を省略すると、この substring() 文字列の残りの部分を切り取ります。

substr()メソッド

substr() 似ている slice()

第二引数が指定される部分の長さ

var str = "Apple, Banana, Mango";
var res = str.substr(7,6);

resの結果は:

Banana

実際に試してみる

第二引数を省略すると、substr()は文字列の残りの部分を切り取ります。

var str = "Apple, Banana, Mango";
var res = str.substr(7);

実際に試してみる

resの結果は:

Banana, Mango

最初の引数が負の場合、文字列の末尾から位置を計算します。

var str = "Apple, Banana, Mango";
var res = str.substr(-5);

実際に試してみる

resの結果は:

Mango

第二引数は負値ではいけません。なぜなら、それは長さを定義しているからです。

文字列の内容を置き換える

replace() 指定された文字列内の値を別の値で置き換える方法:

str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3School");

実際に試してみる

replace() メソッドは呼び出した文字列を変更しません。それは新しい文字列を返します。

デフォルトでは、replace() 最初の一致のみを置換します

str = "Please visit Microsoft and Microsoft!";
var n = str.replace("Microsoft", "W3School");

実際に試してみる

デフォルトでは、replace() 大文字小文字を区別します。したがって、MICROSOFTの一致には対応しません:

str = "Please visit Microsoft!";
var n = str.replace("MICROSOFT", "W3School");

実際に試してみる

大文字小文字を区別しない置換を行うには、正規表現の /i(大文字小文字を区別しない):

str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3School");

実際に試してみる

注意:正規表現には引用符が不要です。

すべての一致を置換するには、正規表現の g フラグ(グローバル検索用):

str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/g, "W3School");

実際に試してみる

JavaScriptの正規表現の章でさらに詳しく学びます正規表現の内容です。

大文字と小文字に変換

次の方法で toUpperCase() 文字列を大文字に変換します:

var text1 = "Hello World!";       // 文字列
var text2 = text1.toUpperCase();  // text2 は大文字に変換された text1 です

実際に試してみる

次の方法で toLowerCase() 文字列を小文字に変換します:

var text1 = "Hello World!";       // 文字列
var text2 = text1.toLowerCase();  // text2 は小文字に変換された text1 です

実際に試してみる

concat() メソッド

concat() 二つの文字列または複数の文字列を結合します:

var text1 = "Hello";
var text2 = "World";
text3 = text1.concat(" ",text2);

実際に試してみる

concat() 方法は加法演算子の代わりに使用できます。以下の二行は同等です:

var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");

すべての文字列メソッドは新しい文字列を返します。それらは元の文字列を変更しません。

正式には、文字列は変更不可能です:文字列は変更できず、交換のみできます。

String.trim()

trim() 方法删除字符串两端的空白符:

var str = "       Hello World!        ";
alert(str.trim());

警告:Internet Explorer 8 或更低版本不支持 trim() 方法。

実際に試してみる

如需支持 IE 8,您可搭配正则表达式使用 replace() 方法代替:

var str = "       Hello World!        ";
alert(str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));

実際に試してみる

您还可以使用上面的 replace 方案将 trim 函数添加到 JavaScript String.prototype:

if (!String.prototype.trim) {
  String.prototype.trim = function () {
    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
};
var str = "       Hello World!        ";
alert(str.trim());

実際に試してみる

提取字符串字符

这是两个提取字符串字符的方法安全方法:

  • charAt(位置)
  • charCodeAt(位置)

charAt() 方法

charAt() 方法返回字符串中指定下标(位置)的字符串:

var str = "HELLO WORLD";
str.charAt(0);            // 返回 H

実際に試してみる

charCodeAt() 方法

charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码:

var str = "HELLO WORLD";
str.charCodeAt(0);         // 返回 72

実際に試してみる

属性访问(Property Access)

ECMAScript 5 (2009) 允许对字符串的属性访问 [ ]:

var str = "HELLO WORLD";
// 返回 H

実際に試してみる

使用属性访问有点不太靠谱:

  • 不适用于 Internet Explorer 7 或更早的版本
  • 它让字符串看起来像是数组(其实并不是)
  • 如果找不到字符,[ ] 返回 undefinedcharAt() 返回空字符串。
  • 它是只读的。str[0] = "A" 不会产生错误(但也不会工作!)

var str = "HELLO WORLD";
str[0] = "A";             // 不产生错误,但不会工作
// 返回 H

実際に試してみる

ヒント:文字列を配列として処理したい場合は、まずそれを配列に変換する必要があります。

文字列を配列に変換する

文字列を配列に変換する方法は、 split() 文字列を配列に変換する:

var txt = "a,b,c,d,e";   // 文字列
txt.split(",");          // 逗号で区切る
txt.split(" ");          // 空白で区切る
txt.split("|");          // 竖線で区切る

実際に試してみる

区切符を省略すると、返される配列は index [0] に含まれる整个の文字列を含みます。

区切符が "" であれば、返される配列は単一の文字で区切られた配列です:

var txt = "Hello";       // 文字列
txt.split("\""

実際に試してみる

完全な String リファレンスマニュアル

完全なリファレンスマニュアルが必要な場合は、私たちの完全な JavaScript 文字列リファレンスマニュアル

このマニュアルにはすべての文字列属性とメソッドの説明と例が含まれています。