【Javascript】 文字列と関連のメソッド

Javascriptでの文字列は、最初から様々な操作ができるようになっています。切り取り、文字列内への変数の埋め込み、文字列以外との連結などが気軽に行えます。

文字列を作る

"" (ダブルクォーテーション), '' (シングルクォーテーション), `` (バッククォート)のいずれかで文字を囲みます。

const s1 = "Hello, World!!";
const s2 = 'Hello, World!!';
const s3 = `Hello, World!!`;

似ていますが、それぞれ少しずつ差があります。

ダブルクォーテーションとシングルクォーテーション

このどちらも、普通の文字列です。他言語と同様に、\nなどの特殊文字が利用できます。

const s = "Hello,\nWorld!!";
console.log(s);

Hello,
World!!

特殊文字になり得る文字をそのまま出力したい場合、他の言語と同様にバックスラッシュを付けることで、バックスラッシュ自体をエスケープが必要です。

const s = "\\n \"Javascript\" World!! \\";
console.log(s);

\n "Javascript" World!! \

ここで, ""で囲った文字列は'が, ''で囲った文字列は"のエスケープが不要です.

const s = "Hello, 'Javascript' World!!"; // シングルクォーテーションのエスケープが不要
const s2 = 'Hello, "Javascript" World!!'; // ダブルクォーテーションのエスケープが不要

この仕様は、例えばHTMLのonclick内などで活躍します。

<button onclick="alert('foobar');">Example button</button>

バッククォートで囲った文字列

テンプレートリテラルと呼ばれる機能を利用できます。この機能を利用することで、文字列内により簡単に変数を埋め込むことができます。

変数は, ${var}で埋め込みます.

const v = "Javascript";
console.log(`Hello, ${v} World!!`);

Hello, Javascript World!!

数値を埋め込むこんだり、埋め込み時に計算することもできます。

const x = 10;
const y = 20;

console.log(`x is ${x}, y is ${y}, x + y = ${x + y}`);

x is 10, y is 20, x + y = 30

また、特殊文字を使わずに改行することもできます。

const s = `Hello,
Javascript
World!!`;

console.log(s);

Hello,
Javascript
World!!

テンプレートリテラルは、入れ子にできます。

const firstName = "Aaa";
const middleName = "Bbb";
const lastName = "Ccc";

const s = `FirstName: ${firstName}
${middleName ? `MiddleName: ${middleName}` : ""}
LastName: ${lastName}`;

console.log(s);

FirstName: Aaa
MiddleName: Bbb
LastName: Ccc

文字列の操作

結合

+演算子で連結できます。

const s1 = "Hello, ";
const s2 = "World!!";

console.log(s1 + s2);
console.log(s1 + "Javascript " + s2);

Hello, World!!
Hello, Javascript World!!

数値と文字列の結合

同様に+演算子で結合できますが、数値の計算結果を結合したい場合は括弧で囲む必要があります。

const x = 10;
const s1 = "hogehoge";

console.log(s1 + x);
console.log(s1 + (x + 30) + "fugafuga");

hogehoge10
hogehoge40fugafuga

文字数の取得

.lengthで取得できます。

const s = "Hello, World!!";
console.log(s.length);

14

切り取り (substring)

文字列を引き算することはできません。文字列の一部が欲しい場合、substringを利用します。

const s = "abcdefg";
const s2 = s.substring(1, 4);
console.log(s2);

bcd

substringは、s.substring(開始位置, 終了位置)となっています。終了位置を省略した場合、文字列の最後までを取得します。また、終了位置の文字は含まれません。

この例だと、1文字目のb~4文字目の手前にあるdの範囲切り出すので、bcdとなります。

切り取り (slice)

substringとほぼ同じですが、インデックスに負数を指定すると、文字の後ろからのカウントになります。Pythonの配列で見た仕様ですね。

substringより便利なため、こちらをメインに利用しても良いかもしれません。

const s = "abcdefg";
const s2 = s.slice(1, -2);
console.log(s2);

bcde

配列の要素を文字列化 (join)

配列の要素を特定の文字で連結したい場合、joinを使います。

const x = [1, 20, 300];

console.log(x.join(", "));
console.log([2022, 2, 10].join(/));

1, 20, 300
2022/2/10

特定の文字を含むか調べる (indexOf)

含んでいるかのついでに、最初に登場する位置も検索しましょう。

const s = "foo bar hoge";
console.log(s.indexOf("bar"));
console.log(s.indexOf("fuga"));

4
-1

indexOfは、検索したい文字列が最初に登場するのは何文字目かを調べます。もし出現しない場合、-1が返ってきます。

最後にあるのは何文字目かを調べる場合、lastIndexOfを利用してください。

正規表現で検索 (match)

正規表現で文字列を検索することができます。

const s = "foo bar hoge";
const res = s.match(/\S(\s+)\S/g);
console.log(res);

[ 'o b', 'r h' ]

対象となる全ての文字列を抽出したい場合、正規表現の最後にgを付ける必要があります。

見つからなければnullが返ります。

置換 (replace)

普通に文字列を指定しても良いですが、正規表現を用いた方法が一般的です。

というのも、普通に文字列を指定しても最初の1つしか置換されないためです。

replaceの第1引数には置換対象の文字列を、第2引数には置換後の文字列を入れます。

const s = "hoge/hige[aa][aa]";
const s2 = s.replace("ge", "xx");
const s3 = s.replace(/ge/g, "xx");
const s4 = s.replace(/\[aa\]/g, "{cc}");
console.log(s2);
console.log(s3);
console.log(s4);

hoxx/hige[aa][aa]
hoxx/hixx[aa][aa]
hoge/hige{cc}{cc}

文字列の挿入

一旦文字列を切り離す必要があります。

const s = "Hello, World!!";
const f = s.substr(0, 6);
const l = s.substr(6);
const js = f + " Javascript" + l;

console.log(f);
console.log(l);
console.log(js);

Hello,
    World!!
Hello, Javascript World!!

ちょっとしたテクニック

それぞれのメソッドは、変数に入れたりせずとも利用することができます。

つまり、"文字列".replace(...)のような書き方ができます。

console.log(
    "Hello, [[lang]] World!!".replace("[[lang]]", "Javascript")
);

まとめ

Javascriptの文字列は、数値などとの連結も簡単に行なえます。また、テンプレートリテラルを利用することで、更に簡単に文字列を作成することができます。

文字列の操作メソッドの多さは、HTMLで文章を弄る言語ならではですの。文字列を操作したいと思ったら、まずは調べてみて該当するメソッドがないか探してみると良いと思います。