Express Handlebars 获取每个字符串的第一个字母

如何解决Express Handlebars 获取每个字符串的第一个字母

一些 discord 服务器没有图标，discord 将图标呈现为公会名称中每个单词的第一个字符。我正在尝试使用 express 在车把中做到这一点。我执行了以下操作，但出错了。

<h1>Welcome,{{username}}!</h1>
<ul>
<h2>Your guilds</h2>
{{#each guilds as |key value|}}
    <li>
        {{#if key.icon}}
        <img src="https://cdn.discordapp.com/icons/{{key.id}}/{{key.icon}}?size=64" alt="profile"> </p>{{key.name}}</p>
            {{else}}
            <div>
                <h3>{{ key.name.match(/\b\w/g).join('') }}</h3>
                <p>{{key.name}}</p>
            </div>
        {{/if}}
    </li>
{{/each}}
</ul>

错误

Error: Parse error on line 10:
...    <h3>{{ key.name.match(/\b\w/g).join(
-----------------------^
Expecting 'ID',got 'INVALID'

解决方法

在 Handlebars 中，您可以使用自定义辅助函数来处理模板外的 javascript 逻辑。您应该在您的项目中进行两项更改以实现这一目标：

使用自定义帮助程序创建一个文件，通常位于项目的 helpers 文件夹中：

./helpers/hbs.js

function getFirstLetter(name) {
  return name.match(/\b\w/g).join("");
}

module.exports = { getFirstLetter };

修改 app.js 中的把手中间件配置以使用您创建的自定义帮助程序：

./app.js

/**
 * Import Handlebars
 */
const exphbs = require("express-handlebars");
/**
 * Import Custom Helpers
 */
const hbs = require("./helpers/hbs");
/**
 * Template Engine
 */
app.engine(
  ".hbs",exphbs({
    ... all configuration here...
    helpers: hbs,// add custom helpers.
  })
);

现在您可以像这样在模板中使用自定义助手：

<h1>Welcome,{{username}}!</h1>
<ul>
<h2>Your guilds</h2>
{{#each guilds as |key value|}}
    <li>
        {{#if key.icon}}
        <img src="https://cdn.discordapp.com/icons/{{key.id}}/{{key.icon}}?size=64" alt="profile"> </p>{{key.name}}</p>
            {{else}}
            <div>
                <h3>{{getFirstLetter key.name}}</h3>
                <p>{{key.name}}</p>
            </div>
        {{/if}}
    </li>
{{/each}}
</ul>