CodeGym /Javaコース /Frontend SELF JA /文字列とその操作方法

文字列とその操作方法

Frontend SELF JA
レベル 33 , レッスン 3
使用可能

4.1 文字列の基本

JavaScriptの文字列は、文字のシーケンスで、基本的なデータ型のひとつだね。 文字列はシングルクォート('テキスト')、ダブルクォート("テキスト")、 またはバッククォート(`テキスト`)を使って作成できるよ。

文字列の例:

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

文字列の長さを返す:

JavaScript
    
      let str = 'Hello';
      console.log(str.length); // 5
    
  

2. メソッドcharAt(index)

指定された位置の文字を返す:

JavaScript
    
      let str = 'Hello';
      let result = str.charAt(1);
      console.log(result); // 'e'
    
  

3. メソッドtoUpperCase()とtoLowerCase():

文字列を大文字または小文字に変換する:

JavaScript
    
      let str = 'Hello';
      console.log(str.toUpperCase()); // 'HELLO'
      console.log(str.toLowerCase()); // 'hello'
    
  

4. メソッドindexOf(substring)

部分文字列の最初の出現のインデックスを返す、見つからなければ-1を返す:

JavaScript
    
      let str = 'Hello, world!';
      let result = str.indexOf('world');
      console.log(result); // 7
    
  

5. メソッドincludes(substring)

文字列が指定された部分文字列を含んでいるか確認し、trueまたはfalseを返す:

JavaScript
    
      let str = 'Hello, world!';
      let result = str.includes('world');
      console.log(result); // true
    
  

6. メソッドtrim()

文字列の先頭と末尾の空白を削除:

JavaScript
    
      let str = '   Hello, world!   ';
      console.log(str.trim()); // 'Hello, world!'
    
  

7. メソッドreplace(searchValue, newValue)

指定された部分文字列を新しい部分文字列に置換:

JavaScript
    
      let str = 'Hello, world!';
      console.log(str.replace('world', 'JavaScript')); // 'Hello, JavaScript!'
    
  

8. メソッドsplit(separator)

指定された区切り文字で文字列を部分文字列の配列に分割する:

JavaScript
    
      let str = 'Hello, world!';
      let words = str.split(' ');
      console.log(words); // ['Hello,', 'world!']
    
  

9. メソッドsubstring(start, end)

2つのインデックス間の部分文字列を返す:

JavaScript
    
      let str = 'Hello, world!';
      console.log(str.substring(0, 5)); // 'Hello'
    
  

10. メソッドsubstr(start, length)

指定されたインデックスから始まり、指定された文字数の部分文字列を返す:

JavaScript
    
      let str = 'Hello, world!';
      console.log(str.substr(0, 5)); // 'Hello'
    
  

11. メソッドslice(start, end)

文字列の一部を抽出し、新しい文字列を返す:

JavaScript
    
      let str = 'Hello, world!';
      console.log(str.slice(0, 5)); // 'Hello'
    
  

12. メソッドstartsWith(substring)

文字列が指定された部分文字列で始まるか確認し、trueまたはfalseを返す:

JavaScript
    
      let str = 'Hello, world!';
      console.log(str.startsWith('Hello')); // true
    
  

13. メソッドendsWith(substring)

文字列が指定された部分文字列で終わるか確認し、trueまたはfalseを返す:

JavaScript
    
      let str = 'Hello, world!';
      console.log(str.endsWith('world!')); // true
    
  

14. メソッドrepeat(count)

元の文字列の指定された数のコピーを含む新しい文字列を返す:

JavaScript
    
      let str = 'Hello';
      console.log(str.repeat(3)); // 'HelloHelloHello'

      let str2 = '-';
      console.log(str2.repeat(30)); // '---------------------------------------------------------------'
    
  

4.3 新世代の文字列

テンプレート文字列は最近JavaScriptに追加されたんだ。通常の文字列よりも便利で読みやすい方法でテキストを扱えるよ。バッククォート(`)で囲まれ、式のインターポレーションやマルチラインテキストをサポートしている。

構文:

    
      `新世代の文字列`
    
  

例:

テンプレートリテラルgreetingはバッククォートを使って作られている。

JavaScript
    
      const greeting = `Hello, World!`;
      console.log(greeting); // "Hello, World!"
    
  

テンプレート文字列の主な特徴:

  • 式のインターポレーション: テンプレート文字列は${}を使って文字列内に式や変数を挿入できるよ
  • マルチラインテキスト: テンプレート文字列は特別な文字を使わなくてもマルチラインテキストをサポートしている
  • 埋め込み式: テンプレート文字列内でJavaScriptのどんな式も使えるよ、関数も含めてね

テンプレート文字列の使用例を見てみよう。

式のインターポレーション

テンプレート文字列を使えば、変数の値や式の結果を簡単に文字列内に挿入できるよ:

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."
    
  

この例では、変数nameage${}を使って文字列内に挿入されているんだ。

マルチラインテキスト

テンプレート文字列を使えば、改行文字(\n)を使わなくても マルチラインテキストを簡単に作成できる。

JavaScript
    
      let multiLine = `Lorem ipsum odor, consectetuer adipiscing elit.
      Sit lorem mattis eget maximus.`;

      console.log(multiLine);
    
  

埋め込み式

テンプレート文字列内でJavaScriptのどんな式も使えるよ、関数の呼び出しも含めて:

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!"
    
  

もちろん、文字列内で関数を呼び出さない方がいいけど、どうしてもやりたいならできるんだ。

コメント
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION