JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで2つの文字列を連結する方法｜スペースの有無で変わる正しい書き方

JavaScriptで2つの文字列をつなげる（連結する）には、「+」演算子を使用します。文字列と文字列の間にスペースを入れたい場合も、この演算子だけで簡単に実現できます。

ポイントは、「1つ目の文字列の末尾にすでにスペースが含まれているかどうか」です。含まれている場合は余計な処理は不要で、含まれていない場合は半角スペースを明示的に挟む必要があります。それぞれのケースを見ていきましょう。

ケース1：最初の文字列にすでにスペースが含まれている場合

1つ目の文字列の末尾にスペースが含まれているなら、単純に連結だけで十分です。スペースを明示的に追加すると、逆に空白が二重になってしまうので注意しましょう。

コード例

<html>
<body>
  <script>
    function str(str1, str2) {
      return (str1 + str2);
    }
    document.write(str("tutorix is the best ", "e-learning platform"));
  </script>
</body>
</html>

出力結果

tutorix is the best e-learning platform

「tutorix is the best 」の末尾にスペースがあるため、そのまま連結しても自然な一文になります。

ケース2：最初の文字列にスペースが含まれていない場合

1つ目の文字列の末尾にスペースがない場合は、半角スペース（" "）を間に挟んで連結します。これを忘れると、2つの文字列がくっついて不自然な表示になります。

コード例

<html>
<body>
  <script>
    function str(str1, str2) {
      return (str1 + " " + str2);
    }
    document.write(str("tutorix is the best", "e-learning platform"));
  </script>
</body>
</html>

出力結果

tutorix is the best e-learning platform

補足：テンプレートリテラルを使ったモダンな書き方

ES2015（ES6）以降では、テンプレートリテラルを使うと、スペースの挿入を含めた文字列の組み立てがより直感的に行えます。

const str1 = "tutorix is the best";
const str2 = "e-learning platform";

const result = `${str1} ${str2}`;
console.log(result); // tutorix is the best e-learning platform

変数を${ }の中に埋め込めるため、複数の文字列や数値を混ぜて組み立てる場合にも可読性が高くおすすめです。状況に応じて「+」演算子と使い分けるとよいでしょう。

  1. JavaScriptで文字列内の2つ以上の連続スペースを1つのスペースに変換する方法

    概要 HTMLの入力欄からユーザーが入力した文字列をJavaScriptで受け取り、その中に含まれる「2つ以上の連続した空白」を検出し、すべて1つのスペースに置き換えるプログラムを作成します。このような処理には正規表現を使うのが最もシンプルで確実な方法です。replace()メソッドの第1引数に正規表現 /\s{2}/g を指定することで、目的の結果を簡単に得られます。 使用する正規表現のポイント \s：半角スペース・タブ・改行などの空白文字にマッチします。 {2}：直前のパターンが2回以上連続する場合にマッチします。 g（グローバルフラグ）：文字列内のすべての該当箇所を置換対象にします。

  2. JavaScriptでCSSルールをスタイルシートに追加・削除する方法【insertRule()とdeleteRule()の使い方】

    JavaScriptを使えば、ページに読み込まれたスタイルシートに対して動的にCSSルールを操作できます。その中心的な役割を果たすのが insertRule() メソッドと deleteRule() メソッドです。insertRule(): スタイルシート内の指定した位置（インデックス）に新しいCSSルールを追加します。deleteRule(): 指定したインデックスにある既存のスタイルルールを削除します。以下の具体例を通じて、JavaScriptでスタイルシートへCSSルールを追加する方法を見ていきましょう。例1：insertRule()で新しいルールを追加する<!DOCTYPE ht