【初心者向け】JavaScriptを用いた文字列操作について解説

本記事では、JavaScriptを用いて文字列の操作（連結・検索・切り出しなど）についてサンプルコードと共に解説していきます。

ぜひ最後までご覧ください。

1 +演算子
2 テンプレートリテラル
3 slice()メソッド・substr()メソッド・substring()メソッド
4 splitメソッド
5 replace()メソッド
6 indexOf()メソッド・lastIndexOf()メソッド
7 trim()メソッド
8 toUpperCase()メソッド・toLowerCase()メソッド
9 lengthメソッド
10 まとめ

+演算子

文字列を連結するには、+演算子を用いるパターンを見ていきましょう。

対象の文字列 + 対象の文字列;

1	対象の文字列 + 対象の文字列;

サンプルコードを例に見ていきましょう。

let string1 = 'あいう';
let string2 = 'えお';

let result = string1 + string2;
console.log(result);

let string1 = 'あいう';

let string2 = 'えお';

let result = string1 + string2;

console.log(result);

実行結果として、

あいうえお // console.logの結果

1	あいうえお // console.logの結果

が返ってきます。

2020.08.09【JavaScript】文字を結合させる方法を解説！

テンプレートリテラル

文字列を連結するには、+演算子を用いるパターン以外にもES6で登場したテンプレートリテラルで文字列を連結するパターンを見ていきましょう。

let a = '文字列';
let b = '文字列';

let result = `${a}と${b}です`;

let a = '文字列';

let b = '文字列';

let result = `${a}と${b}です`;

サンプルコードを例に見ていきましょう。

let a = 'あいう';
let b = 'えお';

let result = `${a}${b}`;
console.log(result);

let a = 'あいう';

let b = 'えお';

let result = `${a}${b}`;

console.log(result);

実行結果として、

あいうえお // console.logの結果

1	あいうえお // console.logの結果

が返ってきます。

slice()メソッド・substr()メソッド・substring()メソッド

文字列を切り出したいときは、slice()メソッドとsubstr()メソッドとsubstring()メソッドを使います。

まずは、slice()メソッドについて見ていきましょう。

対象の文字列.slice( 開始位置, 終了位置);

1	対象の文字列.slice( 開始位置, 終了位置);

サンプルコードと共にslice()メソッドを見ていきましょう。

let string = 'お疲れさまでした。';
let result = string.slice(0, 3);
console.log(result);

let string = 'お疲れさまでした。';

let result = string.slice(0, 3);

console.log(result);

実行結果として、

お疲れ // console.logの結果

1	お疲れ // console.logの結果

が返ってきます。

次にsubstr()メソッドを見ていきましょう。

対象の文字列.substr( 開始位置, 切り出す文字数);

1	対象の文字列.substr( 開始位置, 切り出す文字数);

サンプルコードと共にsubstr()メソッドを見ていきましょう。

let string = 'お疲れさまでした。';
let result = string.substr(5, 3);
console.log(result);

let string = 'お疲れさまでした。';

let result = string.substr(5, 3);

console.log(result);

実行結果として、

でした // console.logの結果

1	でした // console.logの結果

が返ってきます。

最後にsubstring()メソッドを見ていきましょう。

対象の文字列.substring( 開始位置, 終了位置);

1	対象の文字列.substring( 開始位置, 終了位置);

サンプルコードと共にsubstring()メソッドを見ていきましょう。

let string = 'お疲れさまでした。';
let result = string.substring(0, 5);
console.log(result);

let string = 'お疲れさまでした。';

let result = string.substring(0, 5);

console.log(result);

実行結果として、

お疲れさま // console.logの結果

1	お疲れさま // console.logの結果

が返ってきます。

2021.02.20【初心者向け】JavaScriptの文字列を分割する方法は？基本から実践例までわかりやすく解説！

splitメソッド

文字列をカンマ区切りで配列に格納したいときにsplit()メソッドを使います。

対象の文字列.split();

1	対象の文字列.split();

サンプルコードを例にsplit()メソッドを見ていきましょう。

let string = 'a,b,c,d,e,f,g';
let result = string.split(',');
console.log(result);

let string = 'a,b,c,d,e,f,g';

let result = string.split(',');

console.log(result);

実行結果として、

["a", "b", "c", "d", "e", "f", "g"] // console.logの結果

1	["a", "b", "c", "d", "e", "f", "g"] // console.logの結果

が返ってきます。

2020.08.23JavaScriptで文字列を分割して新たな配列を作る方法！

replace()メソッド

文字列を置換・削除したいときに、replace()を使います。

最初は文字列の置換についていきましょう。

対象の文字列.replace(置換前の文字列, 置換後の文字列);

1	対象の文字列.replace(置換前の文字列, 置換後の文字列);

サンプルコードを例に見ていきます。

let string = 'abcdefg';
let result = string.replace('abcdefg', 'xyz');
console.log(result);

let string = 'abcdefg';

let result = string.replace('abcdefg', 'xyz');

console.log(result);

実行結果として、

xyz // console.logの結果

1	xyz // console.logの結果

が返ってきます。

次に、文字列を削除するパターンを見ていきましょう。

対象の文字列.replace(削除したい文字列, '');

1	対象の文字列.replace(削除したい文字列, '');

サンプルコードを使って見ていきましょう。

let string = 'abcdefg';
let result = string.replace('abc', '');
console.log(result);

let string = 'abcdefg';

let result = string.replace('abc', '');

console.log(result);

実行結果として、

defg // console.logの結果

1	defg // console.logの結果

が返ってきます。

indexOf()メソッド・lastIndexOf()メソッド

文字列で検索をしたいときは、indexOf()メソッドを使います。

対象の文字列.indexOf( 検索したい文字列 );

1	対象の文字列.indexOf( 検索したい文字列 );

indexOf()メソッドの特徴

検索したい文字列を含んでいればインデックスを返す（0文字目から数えて何文字目なのか？）
検索したい文字列を含まない場合、「-1」を返す

サンプルコードを例に見ていきましょう。

let string = 'お疲れさまでした';
let result = string.indexOf('でした');
let result2 = string.indexOf('!'); 

console.log(result);
console.log(result2);

let string = 'お疲れさまでした';

let result = string.indexOf('でした');

let result2 = string.indexOf('!');

console.log(result);

console.log(result2);

実行結果として、

5 // console.logの結果
-1 // console.logの結果

1 2	5 // console.logの結果 -1 // console.logの結果

が返ってきます。

文字列を最後から検索するときに使うメソッドがlastIndexOf()メソッドになります。

対象の文字列.lastIndexOf( 検索したい文字列 );

1	対象の文字列.lastIndexOf( 検索したい文字列 );

lastIndexOf()メソッドの特徴

検索したい文字列を含んでいればインデックスを返す
検索したい対象の文字列を最後から検索する（インデックスは文字列の先頭から数えた値になる）
検索したい文字列を含まない場合、「-1」を返す

lastIndexOf()メソッドを用いたサンプルコードを見ていきましょう。

let string = 'お疲れさまでした';
let result = string.lastIndexOf('でした');
let result2 = string.lastIndexOf('!'); 

console.log(result);
console.log(result2);

let string = 'お疲れさまでした';

let result = string.lastIndexOf('でした');

let result2 = string.lastIndexOf('!');

console.log(result);

console.log(result2);

実行結果として、

5 // console.logの結果
-1 // console.logの結果

1 2	5 // console.logの結果 -1 // console.logの結果

が返ってきます。

trim()メソッド

文字列の前後の空白を削除するときに、trim()を使います。

対象の文字列.trim();

1	対象の文字列.trim();

サンプルコードを例にtrim()メソッドを見ていきましょう。

let string = '　　　　abcdefg　　　　　';
let result = string.trim();
console.log(result);

let string = '　　　　abcdefg　　　　　';

let result = string.trim();

console.log(result);

実行結果として、

abcdefg // console.logの結果

1	abcdefg // console.logの結果

が返ってきます。

toUpperCase()メソッド・toLowerCase()メソッド

文字列を大文字・小文字に変換するときは、大文字だとtoUpperCase()メソッドを用いて、小文字だとtoLowerCase()メソッドを使います。

対象の文字列.toUpperCase();
対象の文字列.toLowerCase();

1 2	対象の文字列.toUpperCase(); 対象の文字列.toLowerCase();

サンプルコードを例にtoUpperCase()メソッドとtoLowerCase()メソッドを見ていきましょう。

let string = 'abcdefg';
let result = string.toUpperCase();
console.log(result);

let string = 'VWXYZ';
let result = string.toLowerCase();
console.log(result);

let string = 'abcdefg';

let result = string.toUpperCase();

console.log(result);

let string = 'VWXYZ';

let result = string.toLowerCase();

console.log(result);

実行結果として、

ABCDEFG // console.log の結果

vwxyz // console.log の結果

ABCDEFG // console.log の結果

vwxyz // console.log の結果

が返ってきます。

lengthメソッド

文字列の文字数をカウントするときは、lengthメソッドを使います。

対象の文字列.length;

1	対象の文字列.length;

サンプルコードを例にlengthメソッドを見ていきましょう。

let string = 'abcdefg';
let result = string.length;
console.log(result);

let string = 'abcdefg';

let result = string.length;

console.log(result);

実行結果として、

7 // console.logの結果

1	7 // console.logの結果

が返ってきます。

まとめ

いかがだったでしょうか？

今回は文字列の操作で使われるメソッドをサンプルコードとともに解説しました。

JavaScriptを用いた文字列の操作は実務でも頻出ですので、この機会に習得することをおすすめします。

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。