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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

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

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

 

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

 

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

 

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

 

目次

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

田島悠介

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

 

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・jQueryで挫折しない学習方法を動画で公開中

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講座)を開催しています。プログラミングの初心者でも受講可能です。