@cloudfour/hbs-helpers

中文文档

0.14.0发布于 2026/11/04MITCommonJS近 30 天下载 2105

Handlebars帮助者用于各种"云四"项目.

文档目录30 节

使用量
使用香草手边
使用 gulp-compile-handlebars
帮助者
all
and
any
around
average
capitalize
capitalizeWords
compare
concat
defaultTo
dummyImgSrc
iterate
math
maybe
or
random
randomItem
replaceAll
split
svg
timestamp
toFixed
toFraction
toJSON
toSlug
toTitle

核心手提栏助手

Handlebars帮助者用于各种"云四"项目. 每个帮手都是以可操作的例子.

使用量

npm install --save-dev @cloudfour/hbs-helpers handlebars

handlebars 是同伴依赖: 帮助者使用您的工程副本 Handlebars,4.7.10版本或后在4.x内部.

使用香草手边

const helpers = require('@cloudfour/hbs-helpers');
const Handlebars = require('handlebars');

for (const [name, helper] of Object.entries(helpers)) {
  Handlebars.registerHelper(name, helper);
}

使用 `gulp-compile-handlebars`

const gulp = require('gulp');
const handlebars = require('gulp-compile-handlebars');
const helpers = require('@cloudfour/hbs-helpers');

gulp.task('default', () =>
  gulp
    .src('*.hbs')
    .pipe(handlebars({ helpers }))
    .pipe(gulp.dest('./dist'))
);

以下实例 //=> 以显示一个帮手所做的一切.

帮助者

以下文件曾由下列文件产生: lib/ (单位:千美元)207号) (中文(简体) ). 没有建造步骤可以再生它, 所以当你换一个助手 docblock, 更新它的区域以匹配 .

all ——根据提供的所有论据是否属实而输出一个块(或其倒数)
and 输出一个块(或其反向),根据是两个提供的论点是否属实
any 输出一个块(或其倒数),根据是否提供的任何论据属实
around ——根据中点和"铺放"的最大数量,在前后刻出一个列表
average 平均数组数值
capitalize ——大写字符串的第一个字母
capitalizeWords ——在字符串中大写每个单词
compare —— 使用逻辑运算符比较两个值
concat —— 将复合项目组合成单个字符串
defaultTo ——输出第一个已提供的已存在的值,或者如果一个默认值不存在,则返回到默认值
dummyImgSrc ——返回一个可以用作一img元素的src属性的占位符图像所逃出的数据 URI
iterate - 重复给定数量的块数
math ——在一两个值上进行数学操作
maybe - 随机输出块(50%的输出机会)
or 输出一个块(或其反向),根据提供的论点中任何一个是否属实
random ——生成一个随机整数或由支持的其他类型的随机内容机会.js
randomItem ——只返回一个随机项目
replaceAll — 替换其他字符串中字符串的所有出错
split ——用分隔符字符串或数字来分割字符串或数字
svg ——在指定路径返回 SVG 的内容,并通过包含在根元素上的散列传递任何属性
timestamp - 使用日期或时间格式时刻.js
toFixed — 格式编号为两个固定小数点( 如价格)
toFraction - 如果可能,将小数点格式化为分数的 HTML 实体
toJSON —— 将字符串转换为 JSON; 在帮助子表达式中使用时有用
toSlug —— 将字符串格式化为小写、方便 URL 值
toTitle ——从字符串中去除字母符号和空格

`all`

输出一个块(或它的反向),根据是否全部供应论据是真实的.

var a = true;
var b = 1;
var c = false;

{{#all a b}}✔︎{{else}}✘{{/all}} //=> ✔︎
{{#all b c}}✔︎{{else}}✘{{/all}} //=> ✘

{{#if (all a b)}}
  Also works inline!
{{/if}}

参数: values ...* ——一个或数个值进行测试.
回返情况: string | boolean
自: 页:1

`and`

堕地. 使用更灵活的 all 来帮忙.

输出一个块(或其反向),根据是否同时提供论据是真实的.

var a = true;
var b = 1;
var c = false;

{{#and a b}}✔︎{{else}}✘{{/and}} //=> ✔︎
{{#and b c}}✔︎{{else}}✘{{/and}} //=> ✘

参数: left any • 妇女 right any
回返情况: string
掷出 : Error —— 除非提供两个准确的值,否则会出现出错 .
自: 页:1

`any`

输出一个块(或其反向),根据是否提供任何供应论据是真实的.

var a = true;
var b = 0;
var c = false;

{{#any a b}}✔︎{{else}}✘{{/all}} //=> ✔︎
{{#any b c}}✔︎{{else}}✘{{/all}} //=> ✘

{{#if (any a b)}}
  Also works inline!
{{/if}}

参数: values ...* ——一个或数个值进行测试.
回返情况: string | boolean
自: 页:1

`around`

切换基于中点和最大"铺设"数量的列表前后相会. 有用於发相.

支持可选 offset 散列选项以备您居中值与您的数组索引不符.

<ul>
  {{#around pages 5 2 offset=-1}}
    <li><a href="/page/{{num}}">Page {{num}}</a></li>
  {{/around}}
</ul>

{{! Output: }}
<ul>
  <li><a href="/page/3">Page 3</a></li>
  <li><a href="/page/4">Page 4</a></li>
  <li><a href="/page/5">Page 5</a></li>
  <li><a href="/page/6">Page 6</a></li>
  <li><a href="/page/7">Page 7</a></li>
</ul>

参数: items Array - 收集到地上 center number ——藏品的中点(例如:活页). • 妇女 padding number ——中心前后允许的物品数量.
回返情况: string
自: 页:1

`average`

平均数组数值.

var numbers = [1, 2, 3];
var products = [{rating: 1}, {rating: 2}, {rating: 3}];

{{average ratings}} //=> 2
{{average products key="rating"}} //=> 2

参数: arr Array
回返情况: number ——返回所有值的平均值.
自: 页:1

`capitalize`

将字符串的第一个字母大写.

{{capitalize "hello world"}} //=> "Hello world"

参数: str string | * - 努力利用。其他类型将转换.
回返情况: string
掷出 : TypeError ——没有提供值时出现出错.
自: 页:1

`capitalizeWords`

在字符串中大写每个单词。有助推力和国际性工作字符键.

{{capitalizeWords "hello world"}} //=> "Hello World"
{{capitalizeWords "hello-cañapolísas"}} //=> "Hello-Cañapolísas"
{{capitalizeWords "it's a nice day"}} //=> "It's A Nice Day"

参数: str string | * - 努力利用。其他类型将转换.
回返情况: string
掷出 : TypeError ——没有提供值时出现出错.
自: 页:1

`compare`

使用逻辑运算符比较两个值.

运算符以 JavaScript 命名, 但平等者不动作像 JavaScript 的,所以在到达前读这个 ==。。。 .

== 财务报告和审定财务报表 != 为: 深层结构 平等权。没有强迫,所以 1 == "1" javaScript 会说为真的地方为假; 对象被比较根据内容,因此两个单独的数组中,具有相同值的值在 JavaScript 会说虚假。这对来自JSON的价值观最为重要, ,或查询字符串,其中数字很可能是一个字符串.

=== 财务报告和审定财务报表 !== 比较身份, 匹配 JavaScript 的 === 不过 NaN 等於自身.

关系运营商<, (中文(简体) ), >, (中文(简体) ), <=, (中文(简体) ), >=行为如所料 typeof 对比诸如 "Array" 或者说 "Number"。。。 .

{{#compare 1 "<" 2}}
  This is true.
{{else}}
  This is false.
{{/compare}}

{{#if (compare 1 "<" 2)}}
  Also works inline!
{{/if}}

{{#compare items "typeof" "Array"}}
  The "typeof" operator compares against a type name.
{{/compare}}

{{#compare 1 "==" "1"}}
  Not rendered: "==" does not coerce, unlike JavaScript's.
{{/compare}}

{{#compare listA "==" listB}}
  Rendered when both lists hold equal values, even as separate arrays.
{{/compare}}

参数: left any • 妇女 operator string • 妇女 right any
回返情况: (string | boolean) ——如果块格式化为html,如果内含真/假
改编自: github.com/组装

`concat`

将项目合并为一个字符串.

{{concat "foo" "bar"}} //=> "foobar"

参数: items ...*
回返情况: string
自: 第0.8.0条

`defaultTo`

如果没有.

var doesExist = 'Hello';

{{defaultTo doesExist "Goodbye"}} // => "Hello"
{{defaultTo doesNotExist "Goodbye"}} // => "Goodbye"
{{defaultTo doesNotExist}} // => ""
{{defaultTo doesNotExist doesExist "Goodbye"}} // => "Hello"

参数: value ...*
回返情况: string
自: 页:1

`dummyImgSrc`

返回可用作占位符图像的已逃出的数据 URI 插入元素的src属性.

<img src="{{dummyImgSrc 150 50}}">

<img src="{{dummyImgSrc 150 50 text="foo"}}">

<img src="{{dummyImgSrc 150 50 bg="#000"}}">

<img src="{{dummyImgSrc 150 50 fg="pink"}}">

参数: width number • 妇女 height number
回返情况: string
自: v0.3.0 (韩语)

`iterate`

重复给定的块次数 .

{{#iterate 10}}
  <li>Index: {{@index}} Count: {{@count}}</li>
{{/iterate}}

自: 页:1
改编自: https://github.com/fbrctr/fabricator-组装互联网档案馆的存檔,存档日期2014-12-02

`math`

在一两个值上进行数学操作.

{{math 1 "+" 2}} //=> 3
{{math 2 "-" 1}} //=> 1
{{math 2 "*" 3}} //=> 6
{{math 9 "/" 3}} //=> 3
{{math 17 "%" 3}} //=> 2
{{math 2 "**" 3}} //=> 8
{{math 1 "++"}} //=> 2
{{math 2 "--"}} //=> 1

参数: left any • 妇女 operator string • 妇女 right any
回返情况: number

`maybe`

随机输出块( 50% 的输出机会) 。用于原型多种内容方案,输出出一两个"哑"块来加分.

{{#maybe}}
  Heads!
{{else}}
  Tails!
{{/maybe}}

自: 页:1

`or`

堕地. 使用更灵活的 any 来帮忙.

输出一个块(或其反向),根据是否提供任一块论据是真实的.

var a = true;
var b = 1;
var c = false;
var d = 0;

{{#or a c}}✔︎{{else}}✘{{/or}} //=> ✔︎
{{#or b c}}✔︎{{else}}✘{{/or}} //=> ✔︎
{{#or c d}}✔︎{{else}}✘{{/or}} //=> ✘

参数: left any • 妇女 right any
回返情况: string
掷出 : Error —— 除非提供两个准确的值,否则会出现出错 .
自: 页:1

`random`

生成一个随机整数或其他任何类型的随机内容,由机会.js。。。 .

{{random}} //=> 1839473434
{{random min=5 max=10}} //=> 7
{{random "state"}} //=> WA
{{random "dollar" max=20}} //=> $17.42

参数: method=integer string ——使用机会方法. • 妇女 options.hash object ——通过方法的附加选项.
回返情况: any
自: 页:1

可重复输出

random 每次都让事情变得不同所以一个静态的网站它从来没有建立同样的方式两次. random.create({ seed }) 返回副本帮助者,其输出从一个建筑重复到下一个建筑:

const random = require('@cloudfour/hbs-helpers/lib/random.js');
const randomItem = require('@cloudfour/hbs-helpers/lib/randomItem.js');

// One fixed seed for every render
Handlebars.registerHelper('random', random.create({ seed: 'my-site' }));

// Or a seed per page, e.g. in Eleventy
const perPage = { seed: (options) => options.data.root.page.inputPath };
Handlebars.registerHelper('random', random.create(perPage));
Handlebars.registerHelper('randomItem', randomItem.create(perPage));

seed 是任意值 Chance.js 接受为种子, (中文(简体) ), 或接收助手手列的函数 options 返回时一个每页选取一粒种子:用一粒固定种子,每页取自一粒种子单序列,所以添加一个 {{random}} 改为一个模板更改输出之后的每个模板.
每个种子值都有一个机会实例,与 randomItem 帮助者同样的种子。一页之内的呼声仍然不同.
种子序列持续推进,只要过程运行. 狦 监视模式重建而不重新启动,调用 reset() 在帮助之前每个建筑。它重新播种,包括种子 randomItem 用户.
自: 页:1

`randomItem`

仅返回一个随机项目。如果只给出了一个论据,那就是阵列,它将返回该阵列中的随机项。否则它会回来的其中一个论点.

var beatles = ["John", "Paul", "George", "Ringo"];
{{randomItem beatles}} //=> "George"

{{randomItem "John" "Paul" "George" "Ringo"}} //=> "Ringo"

参数: items ...*
回返情况: any - 一个随机的项目.
自: 页:1

randomItem.create({ seed }) 返回输出的助手副本从一个建筑重复到另一个建筑。它的设置与 random.create(),并取自与 (单位:千美元) random 帮助者给了同样的种子.

`replaceAll`

替换其他字符串中的所有字符串. 也可以被用在数字上,虽然它们会被当作弦来对待. 案件敏感.

{{replaceAll "9:00" ":00" ""}} //=> "9"
{{replaceAll "excellent" "e" ""}} //=> xcllnt
{{replaceAll "She sells sea shells by the seashore" "sh" "barb"}} //=> "She sells sea barbells by the seabarbore"
{{replaceAll "30 bucks" 30, 1000000000}} //=> "1000000000 bucks"

参数: input number | string • 妇女 find number | string • 妇女 replace number | string
回返情况: string
自: 第0.6.1号

`split`

用分隔符字符串或数字来分割字符串或数字. 返回一个可以重排的数组 .

{{split "hello" ""}} //=> ["h", "e", "l", "l", "o"]
{{split "hello world" " "}} //=> ["hello", "world"]
{{split "lions, tigers, and bears" ", "}} //=> ["lions", "tigers", "and bears"]
{{split 2020 2}} //=> ["", "0", "0"]
{{split 1.35 "."}} //=> ["1", "35"]

参数: input number | string • 妇女 separator number | string
回返情况: Array
自: v. 1.0.0 (韩语)

`svg`

在指定路径返回 SVG 的内容, 并带有任何属性穿过根元素中的散列.

文件被内嵌为-is并被标记为安全,因此汉德勒巴不会逃脱. 任何脚本、事件处理器或 javascript: 包含的链接将运行于已打开的页面。在您信任的 SVGs 中只指这个助手, 比如您工程的自有资产, 绝不是用户上传的文件 .

灵感来自 https://github.com/aredridel/npm-handlebars-helper-svg 互联网档案馆的存檔,存档日期2014-12-21

  {{svg "foo/test.svg"}}

  {{svg "foo/test"}}

  {{svg "foo/test" class="foo" width="24" height="24"}}

  {{#svg "foo/test" aria-labelledby="foo-title"}}
    <title id="foo-title">Hello world</title>
  {{/svg}}

参数: name string ——通向SVG的路径. 扩展可省略.
回返情况: string
自: v. 6.0 (单位:千美元)

项目设置

默认情况下,路径由当前工作目录解决. svg.create(settings) 返回带有全工程设置的辅助工具副本应用,所以模板不必重复您的图标的路径:

const svg = require('@cloudfour/hbs-helpers/lib/svg.js');

Handlebars.registerHelper('svg', svg.create({ basePath: './src/assets/images' }));

{{svg "icons/close"}}

basePath ——解决路径的目录. 默认为 process.cwd()。。。 .
extName ——当路径没有时,扩展会被添加. 默认为 .svg。。。 .
omitAttr ——从 SVG 根元素中去除属性. 默认为 ['xmlns', 'xmlns:xlink'],当 SVG 输入时不需要 HTML (英语). 通过自己的数组取代默认值,所以如果你还是想把他们带走.
自: v. 6.0 (单位:千美元)

`timestamp`

使用日期或时间格式时刻.js。。。 .

默认为 UTC 模式, 因为在加价- 地块中大多数使用例不使用计及时区,导致一些反直观输出和行为不一致.

{{timestamp "2015-10-21" format="MMM Do, YYYY"}} //=> "Oct 21st, 2015"

{{timestamp "Oct 21 15" inputFormat="MMM DD YY" format="YYYY-MM-DD"}} //=> "2015-10-21"

{{timestamp "2000-01-01" format="YYYY" utc=false}} //=> "1999"

参数: context Date | string | number | Array | object
回返情况: string
自: 页:1

`toFixed`

格式编号为两个固定小数点(类似于价格).

{{toFixed 1}} //=> 1.00

参数: num number | string
回返情况: string
自: 页:1

`toFraction`

如果可能,将小数作为分数的 HTML 实体格式.

{{toFraction 1.25}} //=> "1¼"
{{toFraction 3.1666}} //=> "3⅙"
{{toFraction 2.7}} //=> 2.7

参数: value number
回返情况: string | number
自: 页:1

`toJSON`

将字符串转换为 JSON; 在帮助子表达式中使用时有用.

{{#each (toJSON '[1,2,3]')}}{{this}}{{/each}} //=> '123'

参数: str string
回返情况: Array | object
自: 页:1

`toSlug`

格式化字符串为小写、 URL 友好值.

{{toSlug "Well, hello there!"}} //=> "well-hello-there"

参数: str string
回返情况: string
自: 页:1

`toTitle`

从字符串中去除数字化字符和空格。用于将文件名转换为更多可用的字符串或ID.

{{toTitle "01 Introduction"}} //=> "Introduction"

参数: name string
回返情况: string
自: 页:1

版本与发布记录

@cloudfour/hbs-helpers 共发布 10 个版本，首次发布于 2016/06/09；过去 12 个月发布了 4 个版本。

版本	发布日期	距今
`0.14.0`latest	2026/11/04	6 天前
`0.13.1`	2026/11/03	7 天前
`0.13.0`	2026/10/07	1 个月前
`0.12.0`	2026/08/27	2 个月前
`0.11.0`	2019/07/31	7 年前
`0.10.0`	2019/03/30	7 年前

关于 @cloudfour/hbs-helpers 的常见问题

@cloudfour/hbs-helpers 是什么？

Handlebars帮助者用于各种"云四"项目.

如何安装 @cloudfour/hbs-helpers？

在项目目录运行 npm install @cloudfour/hbs-helpers，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：handlebars（^4.7.10）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

@cloudfour/hbs-helpers 支持 TypeScript 吗？

该包的 package.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/cloudfour__hbs-helpers 是否存在。

@cloudfour/hbs-helpers 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require()；在 ES Module 项目中也可以用 import 引入（Node.js 会把 module.exports 作为默认导出）。

@cloudfour/hbs-helpers 需要什么版本的 Node.js？

package.json 的 engines 字段要求 Node.js >=22.13.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

@cloudfour/hbs-helpers 可以商用吗？

@cloudfour/hbs-helpers 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

@cloudfour/hbs-helpers 的下载量有多少？

根据 npm 官方下载统计，@cloudfour/hbs-helpers 在 2026/10/10 – 2026/11/08 这 30 天内被下载 2,105 次，日均约 70 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

@cloudfour/hbs-helpers 还在维护吗？

最新版本 0.14.0 发布于 2026/11/04（6 天前）；至今共发布 10 个版本，其中过去 12 个月发布了 4 个；首次发布于 2016/06/09。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。

npm install @cloudfour/hbs-helpers

pnpmpnpm add @cloudfour/hbs-helpers
yarnyarn add @cloudfour/hbs-helpers
bunbun add @cloudfour/hbs-helpers

peer 依赖handlebars ^4.7.10

npm 7+ 与 pnpm 8+ 会自动安装必需的 peer 依赖，Yarn 需手动安装。

在你的项目目录中运行此命令。

近 30 天下载

2,105

约 2105 次日均 70 次

统计周期 2026/10/10 – 2026/11/08
数据来自 npm 官方下载统计，今天更新

最新版本0.14.0发布于 6 天前

开源许可MIT宽松许可

包体积67.5 kB33 个文件 · 解压后

运行依赖7 个另有 1 个 peer 依赖

模块格式CommonJS无副作用，可 tree-shake

TypeScript未声明类型可查找 @types/cloudfour__hbs-helpers

Node.js>=22.13.0

发布版本10 个近 12 个月 4 个

首次发布2016/06/0910 年前

元数据更新2026/11/04

每一个软件包背后，
都有分享与创造的人。

@cloudfour/hbs-helpers

核心手提栏助手

使用量

使用香草手边

使用 gulp-compile-handlebars

帮助者

all

and

any

around

average

capitalize

capitalizeWords

compare

concat

defaultTo

dummyImgSrc

iterate

math

maybe

or

random