Web Design

【JavaScriptの文字列】概要から連結・結合をまとめました

2021年7月12日

JavaScript文字列
  • JavaScriptの文字列について知りたい

この記事はそんな方へ向けて書いています。

 この記事でわかること

JavaScriptの文字列の概要
JavaScriptの文字列の連結

 本記事の信頼性

2021年6月からWebデザインの職業訓練校で学習中(6ヶ月コース)
使用テキスト:HTML&CSS、JavaScriptのきほんのきほん
ブログ歴:2019年1月にWordPressで当ブログを開設(月間最高62,000PV、52,000円)

本記事では、職業訓練校で学んだJavaScriptについてまとめました。

この記事を読むことで、JavaScriptの文字列の基礎理解ができます。

こーいち
JavaScriptの基礎部分です。

JavaScriptの文字列の概要

JavaScript基礎文法【文字列】

文字列の概要

文字のことです。
'(シングルクォート)もしくは" (ダブルクォート)でくくり、記述します。

実際に記述してみます。

index.html

<script>
 const mozi = 'おはようございます。';  //半角セミコロン、全角にならないように注意
 const sukinamozi = 'ヤッホー';
 console.log(mozi);
 console.log(sukinamozi);
</script>

変数moziを作成して、文字列「おはようございます。」を代入。
変数sukinamoziを作成して、文字列「ヤッホー」を代入。
なお、変数名はなんでもOK、記号はNG。

それぞれの変数を開発者ツールに出力してみます。
出力結果は以下のとおり。

おはようございます。
ヤッホー

メモ:変数名のつけ方のルール

1文字目はアルファベットかアンダースコア(_)、ドル記号($)
2文字目以降は、上記に加えて数字も使える
大文字、小文字は利用できるが区別されるので「blog」と「Blog」は別の変数になる
※ 注意点:日本語などは使用できない

シングルクォート、ダブルクォート

パラメータ前後のクォーテーション記号は、シングルクォート、ダブルクォートのどちらも利用できます。

たとえば、以下の出力結果はどちらも「斉藤さん、こんにちは」です。

index.html

console.log('斉藤さん、こんにちは');
console.log("斉藤さん、こんにちは");
//出力結果:斉藤さん、こんにちは

シングルクォート、ダブルクォート、どちらを使用してもOKです。

ひとつ注意点があります。
「クォテーション記号の中で、同じ記号を使わない」という点です。

たとえば、以下はエラーになります。

index.html

console.log('斉藤さん、こんにちは。'佐藤さん、こんにちは' ');
//出力結果:シングルクォートの中にシングルクォートでエラー

ただし、記号が異なる場合は利用できます。

index.html

console.log('斉藤さん、こんにちは。 ''佐藤さん、こんにちは" ');
//出力結果:斉藤さん、こんにちは。 "佐藤さん、こんにちは" 

こーいち
「シングルクォートで始まり、ダブルクォートで閉じる」はエラーになります。

JavaScriptの文字列の連結結合

JavaScript文字列の連結

加算演算子+で連結

文字列は、加算演算子「+」記号で連結できます。

以下のような文字列も連結できます。

変数に代入された文字列
3つ以上の文字列など

具体例は、以下のとおり。

console.log('伊藤さん' + 'こんにちは');
//出力結果:伊藤さんこんにちは

const kei = 'さん';
console.log('佐藤' + kei + 'おはようございます。');
//出力結果:佐藤さんおはようございます。

実際にHTMLに書いてみます。

index.html

<script>
 console.log('吉田さん' + 'ありがとう');
 const kei = 'さん';
 const aisatsu = 'おやすみなさい'
 console.log('吉田' + kei + aisatsu);
 console.log('吉田' + kei + '、' + aisatsu + '。');
</script>

【解説】
文字列「吉田さん」と文字列「ありがとう」を+で連結させ、開発者ツールに「吉田さんありがとう」を出力。

変数keiをつくり、文字列「さん」を代入。
変数aisatsuをつくり、文字列「おやすみなさい」を代入。

文字列「吉田」、変数kei=さん、文字列「おやすみなさい」を連結させ、開発者ツールに出力。
文字列「吉田」、変数kei=さん、文字列「、」、文字列「おやすみなさい」、文字列「。」を連結させ、開発者ツールに出力。

出力結果は、以下のとおり。

吉田さんおやすみなさい
吉田さん、おやすみなさい。

ダブルクォートを含む文字列の連結

HTMLを出力するときは、"(ダブルクォート)などの記号も文字列の一部として扱う場合があります
通常の文字に比べると、少しわかりにくいので注意です。

記述例は、以下のとおり。

index.html

<script> 
 const css_file = 'style.css'
 console.log('<link rel="stylesheet" href="' + css_file + '">');
</script>

【解説】
変数css_fileをつくり、文字列「style.css」を代入。
linkタグの文字列「<link rel="stylesheet" href="」と、変数css_file=「style.css」、文字列「">」を結合して開発者ツールに出力。

出力結果は、以下のとおり。

<link rel="stylesheet" href="style.css">

評価の順番に注意する文字列の結合

index.html

console.log( ' 100+30の結果は、'+100+30+' です ' );

出力結果は以下のとおり。

100+30の結果は、10030です

計算が間違っています。
理由はプログラムの処理の順番が、以下のようになるからです。

① 文字列「100+30の結果は、」と100が連結。
 出力結果は「100+30の結果は、100」
② 文字列「100+30の結果は、100」と30が連結。
 出力結果は「100+30の結果は、10030」
③ 文字列「100+30の結果は、10030」と文字列「です」が連結。
 出力結果は「100+30の結果は、10030です」

②の時点で100は数字ではなく文字列になっているので、加算されないのです。

こーいち
解決策は、100+30を( )でくくることですね。

メモ:プログラム用語「評価」

JavaScriptはプログラムの内容を理解して、なんらかの処理を実行しようとします。
これをプログラム用語で「評価」といいます。

色々な文字列の扱い方【バッククォート】

`(バッククォート)で括られた文字列では、${変数名}という形で文字列を結合できます。

その他の特徴として、`を使うとその中の改行が有効になります。

たとえば、以下のとおり。

const kei = 'さん';
console.log(`こんにちは、鈴木${kei}`);
//出力結果:こんにちは、鈴木さん

const kana = `あいうえお
かきくけこ
さしすせそ`;
console.log(kana);
//出力結果:あいうえお
かきくけこ
さしすせそ

HTMLに記述します。

index.html

<script>
 const kei = 'さん';
 console.log(`こんにちは、吉野${kei}`);
 const kana = `あいうえお
かきくけこ
さしすせそ`;
 console.log(kana);
</script>

【解説】
変数keiを定義し、文字列「さん」を代入
`(バッククォート)で文字列を括り、その中に${変数名}で文字列を連結、開発者ツールに出力。
変数kanaを定義し、文字列をバッククォートで代入。
あいうえお、かきくけこ、さしすせそで、それぞれ改行する。
その際、半角スペースを文字として認識してしまうので、インデント用(字下げ)のスペースは消す。
開発者ツールに変数kanaを出力。

出力結果は、以下のとおり。

こんにちは、吉野さん
あいうえお
かきくけこ
さしすせそ

【まとめ】JavaScriptの基礎文字列をマスターしよう

JavaScript文字列

本記事では、JavaScriptの文字列について解説しました。
職業訓練校で学んだ「JavaScriptの文字列」は以上です。

文字列は、簡単そうなのでわかったつもりになりやすいです。
あとで復習したら意外と「あれ、なんだっけ」になりました。

その場では理解できても、アウトプットするのは難しいもの。

こーいち
基礎理解が重要ですので、一つひとつ積み重ねていきます。

なおJavaScriptの数値の扱い方については、【JavaScriptの数値】概要から様々な計算例をまとめましたで解説しています。

JavaScriptの数値
【JavaScriptの数値】概要から様々な計算例をまとめました

こーいちより

P.S. JavaScriptの文字列をマスターしよう。

関連記事【JavaScript入門】初心者向けに基礎から文法をまとめました
関連記事【未経験】Webデザインの独学は難しい3つの理由【解決策あり】

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.