JavaScript メソッド

JavaScriptのメソッドを使用すると、文字列や配列の操作が容易になります。

.length

.lengthは、文字列や配列の長さを取得することができます。

//文字列にそのままlengthを使う
文字列.length
 
//変数に代入した文字列にlengthを使う
var str = '文字列';
str.length;

let name = "coding haku";
console.log(name.length);  // 11

let fruits = ["apple", "banana", "cherry"];
console.log(fruits.length);  // 3

字列や配列のために用意されているので、数値に使えません。

数値に文字列を組み合わせれば使えるようになります。

let str = 123 + 'abc';
console.log( str.length );　　// 6

lengthで引数の数を取得することができます。

function value( item1, item2, item3, item4 ) {
 
}
 
console.log( value.length );　　//4

.toUpperCase()と.toLowerCase()

.toUpperCase()メソッドは、文字列の全ての文字を大文字に変換します。

let greeting = "Hello, world!";
console.log(greeting.toUpperCase());  // "HELLO, WORLD!"

.toLowerCase()メソッドは、文字列の全ての文字を小文字に変換します。

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

.charAt()

.charAt(n)メソッドは、文字列の指定された位置の文字を返します（nは0から始まるインデックス）。

.charAt()メソッドの構文は次のようになります。

string.charAt(index)

• index：取得する文字の位置を示す整数値です。

文字列の範囲を超える位置が指定された場合、空の文字列が返されます。

const str = "Hello, JavaScript";
const char = str.charAt(7);
console.log(char);

出力結果：

なお、.charAt()メソッドは単一の文字を返すだけであり、部分文字列ではありません。もし範囲内の文字列を取得したい場合は、.substring()メソッドを使用する必要があります。

.substring()

.substring()メソッドは、文字列から一部分を切り出すために使用されるメソッドです。このメソッドは、指定した開始位置と終了位置の間にある文字列を返します。

.substring()メソッドの構文は次のようになります。

string.substring(start, end)

• start：切り出しを開始する位置を示す整数値です。この位置の文字を含みます。
• end：切り出しを終了する位置を示す整数値です。この位置の文字は含まれません。

startとendの間に指定された文字は、返される文字列に含まれます。ただし、endで指定した位置の文字は含まれません。

例えば、以下のコードを考えてみましょう。

const str = "JavaScriptのサンプルテキスト";
const result = str.substring(4, 10);
console.log(result);

出力結果：

上記の例では、startが4でendが10です。したがって、元の文字列の4番目の文字から10番目の文字の間の文字列が返されます。出力結果は「Script」となります。

また、.substring()メソッドでは、startIndexがendIndexより大きい場合、自動的に位置が交換されます。つまり、以下のようなコードを使用することもできます。

const str = "JavaScriptのサンプルテキスト";
const result = str.substring(10, 4);
console.log(result);    //出力結果：Script

この場合でも、同じ結果が得られます。.substring()メソッドは、指定した範囲の文字列を返すため、どちらの順序でも同じ結果が得られるのです。

replace()

replace()メソッドは、文字列の特定の部分を新しい文字列で置き換える機能を持っています。

基本的な使用法は以下のようになります。

let oldString = "Hello, world!";
let newString = oldString.replace("world", "JavaScript");
console.log(newString); // 出力： "Hello, JavaScript!"

この例では、”world”という部分が”JavaScript”に置き換えられています。

ただし、replace()メソッドは最初にマッチした部分のみを置き換えます。すべてのマッチした部分を置き換えたい場合は、正規表現のグローバルフラグ(g)を使用すると便利です。

例えば、次のコードではgフラグを使用して、文字列内のすべての”apple”という文字を”orange”に置換します。

let str = "apple apple apple";
let regex = /apple/g;
let newStr = str.replace(regex, "orange");

console.log(newStr);  // "orange orange orange"

gフラグがなければ、最初の”apple”だけが”orange”に置換され、結果は”orange apple apple”となります。

.split()

split()メソッドは、文字列を指定した区切り文字で分割し、その結果を配列として返す関数です。区切り文字は引数として指定し、その区切り文字を基に元の文字列が分割されます。

let str = "Hello, World!";
let result = str.split(",");

console.log(result);  // ["Hello", " World!"]

この例では、","が区切り文字として指定され、その結果、文字列”Hello, World!”が2つの部分、”Hello”と” World!”に分割され、それらが配列として返されます。

また、.split()メソッドにはオプショナルな2つ目の引数があり、これは分割する最大の要素数を指定します。この引数を指定すると、返される配列の長さがその数に制限されます。

let str = "Hello, my, name, is, Haku";
let result = str.split(",", 3);

console.log(result);  // ["Hello", " my", " name"]

この例では、2つ目の引数に3を指定しています。そのため、文字列は最初の3つのカンマで分割され、それ以降のテキストは無視されます。

indexOf()

indexOf()メソッドは、指定した要素が配列内に存在する場合、その最初のインデックスを返し、存在しない場合は-1を返します。このメソッドは配列だけでなく、文字列でも使用することができます。

let array = [1, 2, 3, 4, 5];
let index = array.indexOf(3);

console.log(index);  // 2

この例では、配列array内で値3が最初に現れる位置（インデックス）を探しています。値3は配列の3番目の要素なので、indexOf()は2を返します（JavaScriptの配列は0から始まるため）。

もし探している値が配列内に存在しない場合、indexOf()は-1を返します。

let array = [1, 2, 3, 4, 5];
let index = array.indexOf(6);

console.log(index);  // -1

文字列に対してindexOf()を使用する場合も同様に、指定した文字列が最初に現れる位置（インデックス）を返します。

let str = "Hello, World!";
let index = str.indexOf("World");

console.log(index);  // 7

この例では、文字列str内で”World”が最初に現れる位置を探しています。”World”はインデックス7から始まるため、indexOf()は7を返します。

indexOf()は、要素が配列や文字列内に存在するかどうかを確認したり、その位置を見つけるための便利な方法を提供します。

lastIndexOf()

indexOf()メソッドと非常に似ていますが、indexOf()が最初に見つけたインデックスを返すのに対し、lastIndexOf()は最後に見つけたインデックスを返すという違いがあります。

let array = [1, 2, 3, 4, 5, 3];
let index = array.lastIndexOf(3);

console.log(index);  // 5

この例では、配列array内で値3が最後に現れる位置（インデックス）を探しています。値3は配列の6番目の要素なので、lastIndexOf()は5を返します（JavaScriptの配列は0から始まるため）。