.NET開発者のためのブログメディア
JavaScriptでのStringの使い方｜各メソッドをコード付きで紹介
- SE
- 組み込み関数にはどういった種類があるのでしょうか？
- PM
- 主に6種類ありますが、ここではStringについて見ていきましょう。
目次
JavaScriptでのStringの使い方とは？
今回は、JavaScriptでの文字列（String）の使い方について説明します。JavaScriptでは、文字列をダブルクォーテーション（”）で囲みます。
シングルクォーテーション（’）で囲んでも大丈夫です。
|
1
2
|
str1 = "string1";
str2 = 'string2';
|
JavaScriptでのStringの使い方に興味のある方はぜひご覧ください。
文字の取り出し
JavaScriptでの文字の切り出しについて紹介します。
charAtメソッドを使用します。実際のソースコードを見てみましょう。
|
1
2
3
4
5
|
str = "Hello world.";
for (let i = 0; i < str.length; i++) {
console.log(str.charAt(i));
}
|
実行結果は以下のようになります。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
H
e
l
l
o
w
o
r
l
d
.
|
文字列長はlengthメソッドで取得できます。
文字列の抽出
JavaScriptでのStringの抽出方法について紹介します。substringメソッドやsliceメソッドを使用します。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
|
str = "Hello world.";
console.log(str.substring(2, 5)); // llo
console.log(str.substring(6)); // world.
// 負の値を指定すると、0とみなされる
console.log(str.substring(-3)); // Hello world.
console.log(str.slice(2, 5)); // llo
console.log(str.slice(6)); // world.
// 負の値を指定すると、後ろから抽出する
console.log(str.slice(-3)); // ld.
|
実行結果は以下のようになります。
|
1
2
3
4
5
6
|
llo
world.
Hello world.
llo
world.
ld.
|
このように、JavaScriptではStringを抽出できます。
文字列のトリミング
JavaScriptでのStringのトリミング方法について紹介します。trimメソッドやtrimStartメソッド、trimEndを使用します。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
|
str = " Hello world. ";
console.log(" str[" + str + "]");
// 両端のトリミング
console.log(" str.trim[" + str.trim() + "]");
// 先頭のトリミング
console.log("str.trimStart[" + str.trimStart() + "]");
// 末尾のトリミング
console.log(" str.trimEnd[" + str.trimEnd() + "]");
|
実行結果は以下のようになります。
|
1
2
3
4
|
str[ Hello world. ]
str.trim[Hello world.]
str.trimStart[Hello world. ]
str.trimEnd[ Hello world.]
|
このように、JavaScriptではStringのトリミングができます。
文字列の分割
JavaScriptでのStringの分割方法について紹介します。splitメソッドを使用します。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
|
str = "item1,item2,item3,item4,item5";
// ,で分割
console.log(str.split(","));
// ,で分割（上限3）
console.log(str.split(",", 3));
// 1文字ずつ分割
console.log(str.split(""));
|
実行結果は以下のようになります。
|
1
2
3
4
5
6
7
8
9
|
[ 'item1', 'item2', 'item3', 'item4', 'item5' ]
[ 'item1', 'item2', 'item3' ]
[
'i', 't', 'e', 'm', '1', ',',
'i', 't', 'e', 'm', '2', ',',
'i', 't', 'e', 'm', '3', ',',
'i', 't', 'e', 'm', '4', ',',
'i', 't', 'e', 'm', '5'
]
|
このように、JavaScriptではStringの分割ができます。
文字列の結合
JavaScriptでのStringの結合方法について紹介します。concatメソッドやrepeatメソッドを使用します。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
str = "Hello";
console.log(str); // Hello
// 文字列を結合
str = str.concat(" world.");
console.log(str); // Hello world.
// 複数の文字列を結合
str = str.concat("hoge ", "piyo ", "fuga");
console.log(str); // Hello world.hoge piyo fuga
// 文字列の繰り返し
str = str.repeat(2);
console.log(str); // Hello world.hoge piyo fugaHello world.hoge piyo fuga
|
実行結果は以下のようになります。
|
1
2
3
4
|
Hello
Hello world.
Hello world.hoge piyo fuga
Hello world.hoge piyo fugaHello world.hoge piyo fuga
|
このように、JavaScriptではStringの分割ができます。
文字列の置換
JavaScriptでのStringの置換方法について紹介します。replaceメソッドを使用します。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
|
str = "Hello world.";
console.log(str); // Hello world.
// 文字列を置換
str = str.replace("Hello", "Goodmorning");
console.log(str); // Goodmorning world.
// 文字列を置換(正規表現)
str = str.replace(/[A-Z]/, "");
console.log(str); // oodmorning world.
|
実行結果は以下のようになります。
|
1
2
3
|
Hello world.
Goodmorning world.
oodmorning world.
|
このように、JavaScriptではStringの置換ができます。
文字列の検索
JavaScriptでのStringの検索方法について紹介します。indexOfメソッドやlastIndexOfメソッドを使用します。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
|
str = "Hello world.";
// 最初に登場するindex
console.log(str.indexOf("o")); // 4
// 指定index以降に登場するindex
console.log(str.indexOf("o", 5)); // 7
// 最後に登場するindex
console.log(str.lastIndexOf("o")); // 7
// 登場しない場合は-1
console.log(str.indexOf("z")); // -1
|
実行結果は以下のようになります。
|
1
2
3
4
|
4
7
7
-1
|
このように、JavaScriptではStringの検索ができます。
- SE
- 複数のメソッドを利用することによって、様々な文字列の操作ができるのですね。
- PM
- 関数を利用することもできますので、ぜひマスターしてください。
まとめ
いかがでしたでしょうか。今回は、JavaScriptでの文字列（String）の使い方について説明しました。
ここでは、以下を紹介しました。
・文字の取り出し
・文字列の抽出
・文字列のトリミング
・文字列の分割
・文字列の結合
・文字列の置換
・文字列の検索
ここで紹介した以外にも、様々な文字列操作を行うことができます。ぜひご自身でソースコードを書いて、理解を深めてください。
Search キーワード検索
Popular 人気の記事
reccomended おすすめ記事
Categories 連載一覧
Tags タグ一覧
Jobs 新着案件
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅)