2024年03月29日

2.[JS] 変数規則と文字連結

ここではJavaScriptの変数名規則、命令文の区切り、文字連結を解説しています。

1.JavaScriptの変数名規則

var header_height = $('#header').outerHeight(true);

■上記の header_height がJavaScriptの変数名です。

 

1.命名ルール

JavaScriptの中で使用する変数名には下記のルールがあります。

①使用できる文字は英数字、記号は_(アンダーバー)と$(ドル記号)のみ

②1文字目には数字は利用できません。

③大文字と小文字は区別されます

④変数名にはJavaScriptの予約語は使用できません

予約語一覧

break,delete,function,return,typeof,case,do,if,switch,var,catch,else,in,this,void,continue,finally,instanceof,throw,while,default,for,new,try,with,let,debugger,const,export,class,extends,super,yield,import等

<例>

サンプル 鑑定 コメント
SlidText 単語の区切りで大文字を利用しています。

予約語との抵触をなくします。

slid_text 単語の区切りに「アンダーバー」を利用しています。

予約語との抵触をなくします。

$slid_text 先頭に$を付けるとPHPの変数と同じになります。

但し、$はその他でも使うのでプログラムが少し見ずらくなります。

_slidtext 文法的にはOKですが、「アンダーバー」は単語の区切りに使った方が見やすいです。
0slidtext 1文字目に「数字」は使えません
$slid-text 「ハイフン」は利用できません

 

2.変数の宣言

変数の宣言には var が基本です。

宣言した場合:ローカル変数になります。

宣言をしない場合:グローバル変数になります。

 

変数の宣言は var 以外に下記もあります。

let     :値の書き換えが可能な変数宣言

const :常数で書き換えはできない変数宣言

 メモ

①関数の中で変数宣言を行うと、関数の中のローカル変数になります。

関数の中で変数宣言を行わないとグローバル変数となり、関数の外からでも参照できます。

よって、意図的に宣言しない場合もあります

 

var と let は、カンマで区切る事により複数の変数名を宣言できます。

よって関数の先頭で変数を宣言する事も出来ます。

 

var 指定は複数回指定してもエラーになりません。

しかし letconst は、複数回の指定はエラーになります

 

2.命令文の区切り、文字連結、加算

■命令文の区切りは;(セミコロン)を利用します。

PHPと同様です。

■文字連結は+(プラス)を利用します。

PHPは .(ドット)です。

※加算も+(プラス)です。加算する場合どうするか?は下記事例を見て下さい。

 

1.文字列の連結

文字列の連結には +(プラス)を利用します。

var first_text = 'abc';
var ans_text = first_text + 'def';
console.log(ans_text);

■"abcdef"が表示されます。

 

2.文字数字の連結

下記事例は加算ではなく、文字連結です。

var n1 = '1.2';
var n2 = n1 + '2'; // '2'でなく2でも同じ結果になります
console.log(n2);
console.log(typeof(n2));

■上記を実行すると下記が表示されます。上記は演算ではなく、文字数字が連結されただけです。

1.22 

string

 メモ +*にすると

上記の var n2 = n1 + '2'; の + * にすると演算が行われ 2.4 number が表示されます。

これは*が使われるとJavaScriptが勝手に演算をしたいのだ!と考えてくれる為です。

 

3.文字数字の加算

加算をさせたい場合は、文字数字をNumber()で数値化します。

var n1 = '1.2';
var n2 = Number(n1) + 2;
console.log(n2);
console.log( typeof(n2) );

■上記を実行すると下記が表示されます。

3.2

number

■数値を文字列にする為にはString()を利用します。

 

関数一覧
  • 1.JavaScript/jQueryとは
  • 2.[JS] 変数規則と文字連結
  • 3.[JS] if文
  • 4.[JS] 配列操作
  • 5.[JS] 文字列操作
  • 6.[JS] 画面情報&操作
  • 7.[JS] Timer処理
  • console.log()
  • for
  • for in
  • for of
  • indexOf()
  • join()
  • length
  • map()
  • match()
  • Object.keys()
  • Object.values()
  • parseInt()
  • pop()
  • push()
  • replace()
  • shift()
  • slice()
  • split()
  • toString()
  • unshift()
  • 1.jQueryの導入と記述の基本
  • 2.jQueryの機能追加
  • 3.jQuery文法
  • 4.階層構造の要素セレクトと操作
  • 5.要素サイズ取得メソッド
  • animate()
  • append()
  • attr()
  • change(func)
  • click()
  • click(func)
  • css()
  • each(func)
  • effect()
  • empty()
  • fadeTo()
  • get()
  • hover(f1,f2)
  • html()
  • map(func)
  • mousedown(func)
  • prop()
  • resize(func)
  • show()、hide()
  • slideToggle()
  • submit()
  • submit(func)
  • text()
  • toggle()
  • toggleClass()
  • val()