JavaScriptで文字列を操作する方法【初心者向け】

JavaScriptで文字列を操作する方法をプログラミング初心者向けに解説した記事です。基本的な文字の出力から、連結、特殊文字(エスケープシーケンス)まで紹介。特殊文字はタブや改行など実践的に使えるようにサンプルコードあり。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

JavaScriptについてプログラミング初心者向けに紹介した記事です。

今回は、JavaScriptで文字列を使う方法について解説します。

また、入門向けにJavaScriptを学習できるサイトを紹介しているので、合わせてご覧ください。

 

本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

目次

1時間でできる無料体験!

 

大石ゆかり

田島メンター!文字列について教えてほしいです。

田島悠介

文字列は必ずシングルコーテーションかダブルコーテーションで囲うというルールがあるんだよ。

大石ゆかり

どちらでもいいんですか?何か違いはあるんでしょうか?

田島悠介

違いを含めて、文字列について見てみよう!

 

JavaScriptで文字列を出力する

JavaScriptで文字列を出力したいときは、「“ ”(ダブルコーテーション)」か「‘ ’(シングルコーテーション)」で囲います。どちらを使っても違いはないので、お好きなほうで構いません。

 

実際に「こんにちは」と出力してみます。

<!DOCTYPE html>
<html lang=”ja”>
  <head>
    <meta charset=”utf-8″>
    <title>はじめてのJavaScript</title>
  </head>
  <body>
    <script>
      var x;
      x = "こんにちは"
      document.write(x);
    </script>
  </body>
</html>

konnichiha

 

また、「I’m happy」のように「’」を含んだ文字列を表示させたいときは、「” “」で囲むとバグらず表示されますので、上手に使い分けましょう。

<script>
  var x;
  x = "I'm happy"
  document.write(x);
</script>

I'm happy

 

 

[PR] フロントエンドで副業する学習方法を動画で公開中

JavaScriptで文字列を連結させる

算術演算子を使って、文字列を連結させて出力することもできます。

今回は「+」を使って結合させてみます。

<script>
  var x;
  x = "こんにちは" + "こんばんは" + "おやすみなさい";
  document.write(x);
</script>

konnichihakonbanhaoyasuminasai

連結されたことがわかると思います。

 

 

JavaScriptで特殊文字(エスケープシーケンス)を使う

プログラムを書いていくなかで、文字列のなかで改行したい場合や、スペースを入れたい時がありますよね。そういう場合には、「」を使った特殊文字(エスケープシーケンス)で表現することができます。

ここでは、代表的な3つをご紹介します。

  • タブ:t
  • シングルコーテーション:’
  • 改行:n

 

タブ:t

まずはタブです。文字列のなかでタブを利用した空間を空けたい時は、「t」を使用します。

<script>
  document.write('おはようtございます');
</script>

おはよう ございます

 

シングルコーテーション:’

次に、「’」についてです。さきほど、「’」を文字列のなかで出力したいときは、全体を「” “」で囲んで「’」と「”」を区別するという方法をご紹介しました。
特殊文字「’」を使えば、「’ ‘」で囲んでいた場合でも、なかの「’」を文字として出力することができます。

<script>
  document.write('I'm happy');
</script>

I'm happy

 

改行:n

最後に改行です。改行したいときは、「n」で改行することができます。

ためしに、「I’m happy★You are happy too」を★の位置で改行してみます。

(今回はconsole.logで出力しました)

<script>
  console.log('I'm happy n You are happy too');
<script>

改行

できましたね。

 

JavaScriptで文字列を使う方法は以上です。

他にもPHPで文字列を出力する方法の記事もあるので、合わせてご覧ください。

 

大石ゆかり

特殊な役割を持った文字を文字列として表示したいときは、バックスラッシュを使うんですねー。

田島悠介

そうそう。環境によっては円記号になるよ。

大石ゆかり

JavaScriptで文字を出力することが出来るようになりました!文字列を囲ったり、特殊文字があったり、少し複雑ですね。

田島悠介

JavaScriptだけじゃなくて他の言語でもほぼ同じなんだ。後、実際にはどこかのHTMLの場所に追加する形で書くことが多いかな。

JavaScriptのwindow.openメソッドの使い方について説明しているので、合わせてご覧ください。

[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する