変数(文字列/数値/配列/連想配列)

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}さしすせそ

コンパイル後

あいうえお&lt;span&gt;かきくけこ&lt;/span&gt;さしすせそ
あいうえお<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逆引きリファレンス一覧へ戻る