4.1 文字列の基本
JavaScriptの文字列は、文字のシーケンスで、基本的なデータ型のひとつだね。 文字列はシングルクォート('テキスト')、ダブルクォート("テキスト")、 またはバッククォート(`テキスト`)を使って作成できるよ。
文字列の例:
let singleQuote = 'Hello, World!';
let doubleQuote = "Hello, World!";
let backticks = `Hello, World!`;
文字列オブジェクトで呼び出せるメソッド:
メソッド | 説明 |
---|---|
length | 文字列の長さを返す |
charAt(index) | 指定された位置の文字を返す |
toUpperCase() | 文字列を大文字に変換 |
toLowerCase() | 文字列を小文字に変換 |
indexOf(substring) | 部分文字列の最初の出現のインデックスを返す、見つからなければ-1 |
includes(substring) | 文字列が指定された部分文字列を含んでいるか確認し、trueまたはfalseを返す |
slice(start, end) | 文字列の一部を抽出し、新しい文字列を返す |
replace(searchValue, newValue) | 指定された部分文字列を新しい部分文字列に置換 |
split(separator) | 指定された区切り文字で文字列を部分文字列の配列に分割する |
trim() | 文字列の先頭と末尾の空白を削除 |
4.2 文字列操作の基本メソッド
メソッドの使用例
1. プロパティlength
文字列の長さを返す:
let str = 'Hello';
console.log(str.length); // 5
2. メソッドcharAt(index)
指定された位置の文字を返す:
let str = 'Hello';
let result = str.charAt(1);
console.log(result); // 'e'
3. メソッドtoUpperCase()とtoLowerCase():
文字列を大文字または小文字に変換する:
let str = 'Hello';
console.log(str.toUpperCase()); // 'HELLO'
console.log(str.toLowerCase()); // 'hello'
4. メソッドindexOf(substring)
部分文字列の最初の出現のインデックスを返す、見つからなければ-1を返す:
let str = 'Hello, world!';
let result = str.indexOf('world');
console.log(result); // 7
5. メソッドincludes(substring)
文字列が指定された部分文字列を含んでいるか確認し、trueまたはfalseを返す:
let str = 'Hello, world!';
let result = str.includes('world');
console.log(result); // true
6. メソッドtrim()
文字列の先頭と末尾の空白を削除:
let str = ' Hello, world! ';
console.log(str.trim()); // 'Hello, world!'
7. メソッドreplace(searchValue, newValue)
指定された部分文字列を新しい部分文字列に置換:
let str = 'Hello, world!';
console.log(str.replace('world', 'JavaScript')); // 'Hello, JavaScript!'
8. メソッドsplit(separator)
指定された区切り文字で文字列を部分文字列の配列に分割する:
let str = 'Hello, world!';
let words = str.split(' ');
console.log(words); // ['Hello,', 'world!']
9. メソッドsubstring(start, end)
2つのインデックス間の部分文字列を返す:
let str = 'Hello, world!';
console.log(str.substring(0, 5)); // 'Hello'
10. メソッドsubstr(start, length)
指定されたインデックスから始まり、指定された文字数の部分文字列を返す:
let str = 'Hello, world!';
console.log(str.substr(0, 5)); // 'Hello'
11. メソッドslice(start, end)
文字列の一部を抽出し、新しい文字列を返す:
let str = 'Hello, world!';
console.log(str.slice(0, 5)); // 'Hello'
12. メソッドstartsWith(substring)
文字列が指定された部分文字列で始まるか確認し、true
またはfalse
を返す:
let str = 'Hello, world!';
console.log(str.startsWith('Hello')); // true
13. メソッドendsWith(substring)
文字列が指定された部分文字列で終わるか確認し、true
またはfalse
を返す:
let str = 'Hello, world!';
console.log(str.endsWith('world!')); // true
14. メソッドrepeat(count)
元の文字列の指定された数のコピーを含む新しい文字列を返す:
let str = 'Hello';
console.log(str.repeat(3)); // 'HelloHelloHello'
let str2 = '-';
console.log(str2.repeat(30)); // '---------------------------------------------------------------'
4.3 新世代の文字列
テンプレート文字列は最近JavaScriptに追加されたんだ。通常の文字列よりも便利で読みやすい方法でテキストを扱えるよ。バッククォート(`)で囲まれ、式のインターポレーションやマルチラインテキストをサポートしている。
構文:
`新世代の文字列`
例:
テンプレートリテラルgreeting
はバッククォートを使って作られている。
const greeting = `Hello, World!`;
console.log(greeting); // "Hello, World!"
テンプレート文字列の主な特徴:
- 式のインターポレーション: テンプレート文字列は
${}
を使って文字列内に式や変数を挿入できるよ - マルチラインテキスト: テンプレート文字列は特別な文字を使わなくてもマルチラインテキストをサポートしている
- 埋め込み式: テンプレート文字列内でJavaScriptのどんな式も使えるよ、関数も含めてね
テンプレート文字列の使用例を見てみよう。
式のインターポレーション
テンプレート文字列を使えば、変数の値や式の結果を簡単に文字列内に挿入できるよ:
let name = "Alice";
let age = 30;
let greeting = `Hello, ${name}! You are ${age} years old.`;
console.log(greeting); // "Hello, Alice! You are 30 years old."
この例では、変数name
とage
が${}
を使って文字列内に挿入されているんだ。
マルチラインテキスト
テンプレート文字列を使えば、改行文字(\n
)を使わなくても
マルチラインテキストを簡単に作成できる。
let multiLine = `Lorem ipsum odor, consectetuer adipiscing elit.
Sit lorem mattis eget maximus.`;
console.log(multiLine);
埋め込み式
テンプレート文字列内でJavaScriptのどんな式も使えるよ、関数の呼び出しも含めて:
let a = 5;
let b = 10;
let result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result); // "The sum of 5 and 10 is 15."
function getGreeting(name) {
return `Hello, ${name}!`;
}
let greeting = `${getGreeting("Bob")}`;
console.log(greeting); // "Hello, Bob!"
もちろん、文字列内で関数を呼び出さない方がいいけど、どうしてもやりたいならできるんだ。
GO TO FULL VERSION