JavaScript String型の使い方

  • JavaScript
  • データ型
最終更新日:

この記事のポイント

JavaScriptでWebサイトやWebアプリケーションを開発する際に欠かせない文字列操作について、基礎から実践まで丁寧に解説していきます。

  • JavaScript文字列の基本概念と作成方法の理解
  • 文字列操作に必要な基本構文とメソッドの習得
  • 実際の開発現場で使える実用的なコード例の活用

これらのポイントを押さえることで、文字列操作の基礎をしっかりと身につけることができるでしょう。

目次

String型とは？

String型は、プログラミングにおいて文字や文字列を扱うためのデータ型です。WebサイトやWebアプリケーションで表示される文字、ユーザーが入力したテキスト、メッセージなど、あらゆる文字情報を操作するために使用されます。

文字列はシングルクォーテーション('')またはダブルクォーテーション("")で囲んで作成し、文字の連結、検索、置換、分割などさまざまな操作が可能です。JavaScriptでは文字列を効率的に処理するための豊富なメソッドが用意されており、これらを活用することでユーザーフレンドリーなWebサイトを構築できます。

【関連】
JavaScriptをもっと詳しく学ぶならpaizaラーニング

基本構文

String型の基本的な作成方法と簡単な操作について説明します。文字列は引用符で囲むことで作成でき、さまざまな方法で操作することができます。

let animal1 = "ネコ"; let animal2 = 'イヌ'; let message = animal1 + "と" + animal2 + "は仲良しです"; console.log(message);







出力結果
ネコとイヌは仲良しです
文字列の長さを調べる場合はlengthプロパティを使用します。
また、大文字小文字の変換も簡単に行えます。

  
let animal = "Panda";
console.log(animal.length);
console.log(animal.toLowerCase());
console.log(animal.toUpperCase());

  


  







出力結果
5
panda
PANDA
実用例
ここからは、String型の実践的な使用方法を具体的なコード例とともに紹介します。実際の開発現場でよく使われる文字列操作のパターンを8つのサンプルコードで解説していきます。
各例では動物の名前を使用して、親しみやすく理解しやすい内容にしています。これらの例を通じて、文字列の検索、置換、分割、結合などの基本的な操作から、より高度な文字列処理まで幅広くカバーしていきます。
文字列の検索と存在確認
文字列内に特定の文字や単語が含まれているかを確認する例です。includes()メソッドを使用することで、指定した文字列が存在するかをtrue/falseで判定できます。

  
let animals = "ライオン、トラ、ゾウ、キリン";
console.log(animals.includes("トラ"));
console.log(animals.includes("サル"));
console.log(animals.indexOf("ゾウ"));

  


  







出力結果
true
false
8
文字列の置換処理
replace()メソッドを使用して、文字列内の特定の部分を別の文字列に置き換える例です。動物名の変更や修正に便利な機能です。

  
let zoo = "動物園にはウサギがいます";
let newZoo = zoo.replace("ウサギ", "カンガルー");
console.log(newZoo);
console.log(zoo.replace(/ウサギ/g, "コアラ"));

  


  







出力結果
動物園にはカンガルーがいます
動物園にはコアラがいます
文字列の分割と配列化
split()メソッドを使って文字列を特定の区切り文字で分割し、配列として扱う例です。複数の動物名を個別に処理したい場合に重宝します。

  
let animalList = "イヌ,ネコ,ハムスター,インコ";
let animals = animalList.split(",");
console.log(animals);
console.log(animals[2]);

  


  







出力結果
[ 'イヌ', 'ネコ', 'ハムスター', 'インコ' ]
ハムスター
文字列の先頭・末尾処理
文字列の最初や最後の部分を取得したり、特定の文字で始まるか終わるかを確認する例です。動物名の分類や整理に活用できます。

  
let animal = "ペンギン";
console.log(animal.startsWith("ペン"));
console.log(animal.endsWith("ギン"));
console.log(animal.charAt(0));
console.log(animal.slice(1, 3));

  


  







出力結果
true
true
ペ
ンギ
文字列の連結とテンプレート
複数の文字列を結合する例として、従来の+演算子とES6のテンプレートリテラルを紹介します。動的な文章作成に便利な機能です。

  
let animal1 = "シマウマ";
let animal2 = "キリン";
let traditional = animal1 + "と" + animal2 + "がいます";
let template = `${animal1}と${animal2}がいます`;
console.log(traditional);
console.log(template);

  


  







出力結果
シマウマとキリンがいます
シマウマとキリンがいます
文字列の繰り返しと埋め込み
repeat()メソッドやpadStart()、padEnd()メソッドを使用した文字列の繰り返しや桁合わせの例です。表示フォーマットの統一に役立ちます。

  
let sound = "ワン";
let animal = "ネコ";
console.log(sound.repeat(3));
console.log(animal.padStart(5, "可愛い"));
console.log(animal.padEnd(5, "！"));

  


  







出力結果
ワンワンワン
可愛いネコ
ネコ！！
文字列の空白除去処理
trim()関連のメソッドを使用して、文字列の前後にある不要な空白を除去する例です。ユーザー入力の処理でよく使用されます。

  
let animal = "  ゴリラ  ";
console.log("'" + animal + "'");
console.log("'" + animal.trim() + "'");
console.log("'" + animal.trimStart() + "'");
console.log("'" + animal.trimEnd() + "'");

  


  







出力結果
'  ゴリラ  '
'ゴリラ'
'ゴリラ  '
'  ゴリラ'
文字列の大文字小文字変換
toUpperCase()とtoLowerCase()メソッドを使用した文字ケースの変換処理です。英語の動物名を統一的に処理する際に重要な機能です。

  
let animals = "Tiger,ELEPHANT,Lion";
let lowerAnimals = animals.toLowerCase();
let upperAnimals = animals.toUpperCase();
console.log(lowerAnimals);
console.log(upperAnimals);

  


  







出力結果
tiger,elephant,lion
TIGER,ELEPHANT,LION
まとめ
String型は、Webアプリケーション開発において最も基本的で重要な要素の一つです。文字列操作をマスターすることで、ユーザーインターフェースの改善やデータ処理の効率化を図ることができます。
String型の活躍する場面
    

  • ユーザー入力データの検証と整形処理
    • 

  • Webページ上での動的なコンテンツ表示制御
    • 

  • APIから取得したデータの加工と表示
    • 

重要なポイント
    

  • 基本的な文字列操作メソッドの理解と活用
    • 

  • テンプレートリテラルによる効率的な文字列作成
    • 

  • 実用的なコード例を通じた実践的なスキル習得
    • 

本記事で紹介した基本構文から実用例まで、段階的に学習を進めることで、String型を使いこなせるようになります。特に文字列の検索、置換、分割、連結といった基本操作は、どのようなWebアプリケーション開発でも頻繁に使用される重要な技術です。継続的な練習を通じて、より複雑な文字列処理にも対応できる技術力を身につけていきましょう。
レベルを更に上げたい方はpaizaプログラミングスキルチェックへ





























  1. paizaラーニングトップ
  2. リファレンス
  3. JavaScriptのリファレンス記事一覧
  4. JavaScript String型の使い方