【JavaScript】文字列(String)の基本的な操作と機能について

【JavaScript】値と変数について理解しようのおさらいになりますが、

入力した文字をダブルクォート(")、シングルクォート(')またはバッククォート(`)の何れかで囲むと文字列型となります。

例えば、"こんにちは"'こんにちは'`こんにちは`は同じ文字列型の値です。


console.log('こんにちは' === "こんにちは"); // true
console.log('こんにちは' === `こんにちは`); // true
    

上記の===は、値と値を比べて、同じであれば真(true)、異なれば偽(false)の結果を得ることができる比較演算子です。

文字のエスケープ処理

"'などの引用符(クォート)で囲った文字列の中に、同じ種類の引用符を使う場合、後の引用符で文字列が閉じられてしまいエラーとなります


console.log('シングルクォートは'です'); // Uncaught SyntaxError: missing ) after argument list
    

上の例だと、「シングルクォートは」までが文字列として認識されてしまい、「です’」が浮いてしまっている状態なので、エラーとなっています。

この様な場合は、文字をエスケープ処理します。
文字のエスケープ処理とは、「この文字はコードの構文に使用しないただの文字です」ということをコンピュータに伝える処理のことです。

エスケープで使用する記号は、WindowsとMacで変わります。

Windows: ¥
Mac: \(option + ¥)

使い方は、エスケープする文字の前に、上記の記号を入力します。


// Windows
console.log('シングルクォートは¥'です'); // シングルクォートは'です
// Mac
console.log('シングルクォートは\'です'); // シングルクォートは'です
    

または、文字列内に使用する引用符とは別の種類の引用符で囲むことで、同じ結果が得ることができます。


console.log("シングルクォートは'です"); // シングルクォートは'です
console.log('ダブルクォートは"です'); // ダブルクォートは"です
console.log('バッククォートは`です'); // バッククォートは`です
    

理解度チェック

  • なぜエスケープ処理が必要なのか説明してください。
  • 単一引用符(シングルクォート)のエスケープを試して実行してみましょう!

文字列を連結する

「こんにちは、」と、「◯◯(ユーザー名)」と、「さん」をまとめて、「こんにちは、◯◯さん」のように一つの文字列にまとめることを、文字列連結といいます。

プラス記号(+)を使用する連結

プラス記号(+)を使用して文字列を連結することができます。

今回は変数を使用しながら実行してみましょう。


const a = 'こんにちは、';
const b = '織田信長';
const c = 'さん';
console.log(a + b + c); // こんにちは、織田信長さん

// 変数を使わない場合
console.log('こんにちは、' + '織田信長' + 'さん');
    

バッククォート(`)を使用する連結

バッククォートを使用した文字列には、変数や値を埋め込むことができます
埋め込む変数や値は、バッククォート内で${変数}のように記述します。


const d = '明智光秀';
console.log(`こんにちは、${d}さん`); // こんにちは、明智光秀さん

// 変数を使わない場合
console.log(`こんにちは、${'明智光秀'}さん`);
    

代入記号を使用した連結

変数が再代入可能なletで宣言されていた場合、連結した結果を元の変数に代入することができます。


let w = '今日は、';
w = w + 'いい天気です'
console.log(w); // 今日は、いい天気です
    

これは、代入記号の(+=)を使用して、次のように省略して記述することができます。


let z = '今日は、';
z += 'いい天気です';
console.log(z); // 今日は、いい天気です
    

理解度チェック

  • 文字を連結してみましょう!
  • 代入記号を使用して、文字を連結してみましょう!

Stringオブジェクト

値(データ)には、ただの値と、オブジェクト型の値があります。

'こんにちは'は、ただの文字列の値です。

例えば、文字列を使用する場合には、文字数を数えたり、1文字目を取得したり、特定の文字列が含まれているかを確認したりするような処理が必要な場合があります。
これらの処理は、どんな文字列でも使用できる共通した機能としてオブジェクトが持っています

ただの値は持っていない便利な機能を、オブジェクト型の値は持っています。

JavaScriptでは、特別な準備もなく、ただの文字列からオブジェクト型の機能を使用することができます
これは、ただの値がオブジェクト型の機能を呼び出すタイミングで、自動的に内部でオブジェクト型に変換してくれるからです。

文字列の長さを取得する

文字列が何文字であるかを取得するためには、length(レングス: 長さ)を参照します。

このlengthは、属性(プロパティ)と呼ばれるデータで、文字列型であるStringオブジェクトが持っています。

プロパティは、ドット(.)を使用して呼び出すことができます。


const e = 'こんにちは';
console.log(e.length); // 5

// 変数を使わない場合の例
console.log('こんにちは'.length); // 5
    

理解度チェック

  • 文字列の長さをコンソールに表示してみましょう!

文字列の特定の場所の文字を取得する

'こんにちは'の先頭の文字は「こ」です。

JavaScriptで、特定の位置の文字を取り出すには、2つの方法があります。

charAtを使用する

charAtはStringオブジェクトの機能で、lengthと同じくドット(.)を使用して呼び出します。

lengthの使い方との違いは、charAtを呼び出すタイミングで、何文字目が欲しいかを伝える必要があるということです。
charAtは、関数(処理をまとめたもの)なので、次のように使用します。


// 1文字目が欲しい場合
const f = 'こんにちは';
console.log(f.charAt(0)); // こ

// 変数を使わない場合の例
console.log('こんにちは'.charAt(0)); // こ
    

丸括弧()を記述することで、関数を呼び出す構文となります

関数には、渡された値を参考にして処理を行うものも多く、その場合()の中に処理に必要な値を記述します。

今回は、1文字目の文字が欲しいので、charAt(0)と記述しています。

ブラケット記法([])を使用する

文字列や配列などの値を使用する場合に、[]を使用したブラケット記法でそれぞれの値を呼び出すことができます。

この[]の中には、0から始まる文字の順番(インデックス番号)を記述します。ドット記法と異なり、ドット(.)は使用しません。


// 1文字目が欲しい場合
const g = 'こんにちは';
console.log(g[0]); // こ

// 変数を使わない場合の例
console.log('こんにちは'[0]); // こ
    

理解度チェック

  • 「あいうえお」の5文字目をコンソールに出力してみましょう!

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。