JavaScriptでのStringの使い方｜各メソッドをコード付きで紹介

Javascript
jQuery
プログラミング言語

公開日時: 2021-01-22 　更新日時: 2022-06-09

この記事でわかること

システム エンジニア: 組み込み関数にはどういった種類があるのでしょうか？

プロジェクト マネージャー: 主に6種類ありますが、ここではStringについて見ていきましょう。

JavaScriptでのStringの使い方とは？

今回は、JavaScriptでの文字列（String）の使い方について説明します。JavaScriptでは、文字列をダブルクォーテーション（”）で囲みます。

シングルクォーテーション（’）で囲んでも大丈夫です。

str1 = "string1";
str2 = 'string2';

1 2	str1 = "string1"; str2 = 'string2';

JavaScriptでのStringの使い方に興味のある方はぜひご覧ください。

文字の取り出し

JavaScriptでの文字の切り出しについて紹介します。

charAtメソッドを使用します。実際のソースコードを見てみましょう。

str = "Hello world.";

for (let i = 0; i < str.length; i++) {
  console.log(str.charAt(i));
}

str = "Hello world.";

for (let i = 0; i < str.length; i++) {

console.log(str.charAt(i));

}

実行結果は以下のようになります。

H
e
l
l
o
 
w
o
r
l
d
.

文字列長はlengthメソッドで取得できます。

文字列の抽出

JavaScriptでのStringの抽出方法について紹介します。substringメソッドやsliceメソッドを使用します。

実際のソースコードを見てみましょう。

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.

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.

実行結果は以下のようになります。

llo
world.
Hello world.
llo
world.
ld.

llo

world.

Hello world.

llo

world.

ld.

このように、JavaScriptではStringを抽出できます。

文字列のトリミング

JavaScriptでのStringのトリミング方法について紹介します。trimメソッドやtrimStartメソッド、trimEndを使用します。

実際のソースコードを見てみましょう。

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() + "]");

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() + "]");

実行結果は以下のようになります。

str[  Hello world.  ]
     str.trim[Hello world.]
str.trimStart[Hello world.  ]
  str.trimEnd[  Hello world.]

str[ Hello world. ]

str.trim[Hello world.]

str.trimStart[Hello world. ]

str.trimEnd[ Hello world.]

このように、JavaScriptではStringのトリミングができます。

文字列の分割

JavaScriptでのStringの分割方法について紹介します。splitメソッドを使用します。

実際のソースコードを見てみましょう。

str = "item1,item2,item3,item4,item5";

// ,で分割
console.log(str.split(","));
// ,で分割（上限3）
console.log(str.split(",", 3));
// 1文字ずつ分割
console.log(str.split(""));

str = "item1,item2,item3,item4,item5";

// ,で分割

console.log(str.split(","));

// ,で分割（上限3）

console.log(str.split(",", 3));

// 1文字ずつ分割

console.log(str.split(""));

実行結果は以下のようになります。

[ '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'
]

[ '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メソッドを使用します。

実際のソースコードを見てみましょう。

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

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

実行結果は以下のようになります。

Hello
Hello world.
Hello world.hoge piyo fuga
Hello world.hoge piyo fugaHello world.hoge piyo fuga

Hello

Hello world.

Hello world.hoge piyo fuga

Hello world.hoge piyo fugaHello world.hoge piyo fuga

このように、JavaScriptではStringの分割ができます。

文字列の置換

JavaScriptでのStringの置換方法について紹介します。replaceメソッドを使用します。

実際のソースコードを見てみましょう。

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.

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.

実行結果は以下のようになります。

Hello world.
Goodmorning world.
oodmorning world.

Hello world.

Goodmorning world.

oodmorning world.

このように、JavaScriptではStringの置換ができます。

文字列の検索

JavaScriptでのStringの検索方法について紹介します。indexOfメソッドやlastIndexOfメソッドを使用します。

実際のソースコードを見てみましょう。

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

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

このように、JavaScriptではStringの検索ができます。

システム エンジニア: 複数のメソッドを利用することによって、様々な文字列の操作ができるのですね。

プロジェクト マネージャー: 関数を利用することもできますので、ぜひマスターしてください。

まとめ

いかがでしたでしょうか。今回は、JavaScriptでの文字列（String）の使い方について説明しました。

ここでは、以下を紹介しました。
・文字の取り出し
・文字列の抽出
・文字列のトリミング
・文字列の分割
・文字列の結合
・文字列の置換
・文字列の検索

ここで紹介した以外にも、様々な文字列操作を行うことができます。ぜひご自身でソースコードを書いて、理解を深めてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

JavaScriptでのStringの使い方｜各メソッドをコード付きで紹介

JavaScriptでのStringの使い方とは？

文字の取り出し

文字列の抽出

文字列のトリミング

文字列の分割

文字列の結合

文字列の置換

文字列の検索

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

JavaScriptでのStringの使い方｜各メソッドをコード付きで紹介

JavaScriptでのStringの使い方とは？

文字の取り出し

文字列の抽出

文字列のトリミング

文字列の分割

文字列の結合

文字列の置換

文字列の検索

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

jQuery UIで動きのあるWebページを作ってみよう！

jQueryの使い方とは？jQueryを正しく使いこなしてWebページ制作をしよう！

jquery.cookie.jsの操作方法を解説｜サンプルコードも紹介

jQueryのon loadとは？jQueryのon loadは適切に使おう！

jQueryでAjax通信を行う方法とは？Ajax通信を正しく使いこなそう！