変数（文字列／数値／配列／連想配列）
Pugで変数を宣言するには、- varを使用します。
変数の展開はそのまま変数名で使用することができます。
構文
宣言
- var 変数名 = 値使用
変数名サンプルコード
Pug
- var page_title = "配下ページ"
h1=page_titleコンパイル後
<h1>Page Title</h1>なお、- varによる変数の宣言は通常1行にしか対応していませんが、ハイフンとvarの間に改行をいれ、varにインデントを付けることで、複数行で宣言することができます。
Pug
-
var baz = [
'apple',
'orange',
'banana'
]型ごとの変数
型ごとの変数の使い方は次の通りです。
文字列
クォーテーションで文字を括ることで、文字列として扱います。
また、文字列連結演算子+を使用することで、文字同士を連結することができます。
文字列連結演算子については、演算子ページをご覧ください。
Pug
- var foo = "あいうえお"
p=foo + "かきくけこ"コンパイル後
<p>あいうえおかきくけこ</p>クォーテーションで括られていない文字列と変数を連結したい場合は、#{変数名}を使用します。
Pug
- var foo = "あいうえお"
p #{foo}かきくけこコンパイル後
<p>あいうえおかきくけこ</p>#{変数名}で変数にHTMLが含まれる場合、エスケープされます。
もしエスケープしたくない場合は、!{変数名}を使用することで、エスケープが行われなくなります。
Pug
- var foo = "あいうえお<span>かきくけこ</span>"
p #{foo}さしすせそ
p !{foo}さしすせそコンパイル後
あいうえお<span>かきくけこ</span>さしすせそ
あいうえお<span>かきくけこ</span>さしすせそ数値
そのまま数字を指定することで数値として扱います。
数値として認識されていれば、算術演算子を使用することができ、演算することができます。
加算は+、減算は-、乗算は*、除算は/、剰余は%が使用できます。
Pug
- var foo = 123
p=bar + 456
p=bar - 456
p=bar * 456
p=bar / 456
p=bar % 456コンパイル後
<p>579</p>
<p>-333</p>
<p>56088</p>
<p>0.26973684210526316</p>
<p>123</p>配列
[値, 値, ...] のように値を角括弧で囲い、値はカンマ区切りで区切ることで配列として扱います。
配列の特定の値を取得するには、配列名[インデックス番号]と配列名にインデックス番号を角括弧で囲うことで、得ることができます。
また、each ... inを用いることで、配列の中身を繰り返して処理することができます。
each ... inについては 繰り返しページをご覧ください。
Pug
- var foo = ['apple', 'orange', 'banana']
p=foo[0]コンパイル後
<p>apple</p>連想配列
{名前: 値, 名前: 値, ...} のように名前と値をコロンで繋げたペアを角括弧で囲い、ペアはカンマ区切りで区切ることで連想配列として扱います。
連想配列の特定の値を取得するには、連想配列名.名前と連想配列に名前をドット繋げることで、得ることができます。
また、each ... inを用いることで、連想配列の中身を繰り返して処理することができます。
each ... inについては 繰り返しページをご覧ください。
Pug
-
var foo = {
apple: 'リンゴ',
orange: 'オレンジ',
banana: 'バナナ'
}
p=foo.appleコンパイル後
<p>apple</p>多次元配列
Pugでは配列および連想配列の入れ子、多次元配列が可能です。
Pug
-
var list = [
{
name: 'リンゴ',
en: 'Apple'
},
{
name: 'オレンジ',
en: 'Orange'
},
{
name: 'バナナ',
en: 'Banana'
}
]
ul: each data in list
li #{data.name} (#{data.en})コンパイル後
<ul>
<li>リンゴ (Apple)</li>
<li>オレンジ (Orange)</li>
<li>バナナ (Banana)</li>
</ul>