文字列の基本 — 作る・つなぐ・数える

文字列は、文字を並べたものを1つの値として扱うための型です。 名前、住所、エラーの文言、画面に出す言葉。プログラムが人と接する場所は、たいてい文字列です。

const greeting = 'こんにちは';

console.log(greeting);
console.log(typeof greeting);

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

3種類の書き方がある

囲む記号は3つあり、どれで囲んでも同じ文字列になります。

console.log("it's");
console.log('言った: "はい"');

console.log('こんにちは'.length);
console.log('JavaScript'.length);
console.log(''.length);

3つある理由は、中に引用符そのものを書きたいときのためです。

const word = 'JavaScript';

console.log(word[0]);
console.log(word[4]);
console.log(word[99]);

const word = 'JavaScript';

console.log(word.at(-1));
console.log(word.at(0));
console.log(word.at(99));

囲んでいる記号と違う記号なら、そのまま書けます。 同じ記号を中に書きたいときは \' のように打ち消せますが、まずは囲みを変えるほうが読みやすくなります。

長さを数える

length はプロパティで、() を付けません。

const word = 'abc';

word[0] = 'X';

console.log(word);

'use strict';

const word = 'abc';

word[0] = 'X';

console.log(word);

中身が無い文字列を空文字列と呼びます。長さは0です。 「無い」を表すのに null を使うか空文字列を使うかは別の話なので、ここでは「長さ0の文字列がある」とだけ覚えてください。

length は「見た目の文字数」とは限りません。 絵文字や結合文字では数が合わなくなります。理由と対処は第4回で扱います。

番号で1文字取り出す

配列と同じく、[] に添字を書きます。番号は0から始まります。

let word = 'abc';

word = 'X' + word.slice(1);

console.log(word);

const word = 'abc';
const loud = word.toUpperCase();

console.log(loud);
console.log(word);

範囲の外を読んでもエラーにはなりません。undefined が返ります。 止まらないので気づきにくい、という点は配列とまったく同じです。

後ろから数えるなら at()

[-1] は使えません。負の番号で取りたいときは at() を使います。

console.log('こんにちは' + '、' + '世界');

const name = '世界';
const count = 3;

console.log(`こんにちは、${name}`);
console.log(`合計 ${count} 件`);
console.log(`1 + 2 = ${1 + 2}`);

一度作った文字列は書き換えられない

ここが配列といちばん違うところです。文字列はイミュータブル、つまりあとから中身を変えられません。

console.log(`1行目
2行目`);

console.log('3' + 4);

代入したのに、何も起きていません。 エラーも出ません。word は abc のままです。

同じコードが、環境によっては止まる

上の実行結果は、sloppy モードという緩い設定のときのものです。 先頭に 'use strict' と書くとstrict モードになり、同じコードが例外になります。

console.log(Number('3') + 4);

console.log(`${null}`);
console.log(`${undefined}`);
console.log(`${[1, 2]}`);
console.log(`${{}}`);

どちらもこのページで実際に実行した結果です。 1行足しただけで挙動が変わりました。

この違いは知っておく価値があります。 いまの JavaScript でファイルを import / export で書くと、その中身は自動的に strict モードになります。 つまり実務のコードでは例外になるほうが普通です。黙って無視されるのを当てにしないでください。

変えたいときは「作り直す」

書き換えられないので、新しい文字列を作って入れ直します。

toUpperCase() のようなメソッドも、元を書き換えず新しい文字列を返します。

元の word は abc のままです。戻り値を受け取らないと、何も起きていないのと同じになります。

つなぐ

+ でつなげます。

値を混ぜるならテンプレートリテラル

バッククォートで囲むと、${} の中に値や式を直接書けます。これをテンプレートリテラルと呼びます。

${} の中には式が書けます。計算もメソッド呼び出しもできます。

改行をそのまま書ける

バッククォートの中では、改行がそのまま改行になります。

+ と \n を並べるより読みやすくなります。

よくある間違い

+ で数と混ぜると足し算にならない

7 にはなりません。 + は片方が文字列だと連結として働くので、4 が文字列に変えられて '34' になります。

数として足したいなら、先に数へ変換します。

ちなみに - や * には連結の意味が無いので、'3' * 4 は 12 になります。同じ見た目で逆の結果になるので、+ だけ特別だと覚えてください。 → 文字列を数値に変換する

${} に何を入れても文字列になる

オブジェクトを入れると [object Object] になります。 中身を見たいときは ${} に入れず、console.log(obj) のようにそのまま渡してください。 画面に [object Object] が出たら、この取り違えを疑ってください。

まとめ

• 文字列は ' " ` のどれで囲んでも同じ。中に書きたい記号で選ぶ
• length は () を付けない。0文字の空文字列もある
• 添字は0から。範囲の外はエラーにならず undefined
• 後ろから取るなら at(-1)
• 文字列は書き換えられない。 変えたいときは作り直す
• strict モードでは、書き換えようとすると例外になる
• 値を混ぜるならテンプレートリテラル。+ は数と混ぜると連結になる

次に学ぶ

長い文字列から必要な部分だけ取り出す方法を学びます。 slice() と substring() の違い、前後の空白の落とし方、桁を揃える書き方を比べます。

→ 第2回: 文字列を切り出す・整える