node.js - 在 Jade 模板中使用 ucfirst 的更好方法？

Question

有没有比这更好的方法来将 Jade 中字符串的第一个字符大写？

for list in project.lists
    - list.name = list.name.charAt(0).toUpperCase() + list.name.slice(1);
    li #{list.name}

每次我想大写一个变量时都这样做是丑陋的，在 Jade 中有什么方法可以定义我在每个模板中都可用的自定义函数，例如：

for list in project.lists
    li #{ucfirst(list.name)}

提前致谢！

score 15 · Accepted Answer

的内容#{}作为标准 JS 执行，因此您可以传入辅助函数以用于类似的事情。您尚未指定，但假设您使用 Jade 和 Express，您可以执行以下操作：

app.locals.ucfirst = function(value){
    return value.charAt(0).toUpperCase() + value.slice(1);
};

这将公开一个ucfirst在 Jade 模板中调用的函数。您也可以在locals每次渲染时将其作为一部分传递，但如果您使用 Express，它会自动执行。

score 5 · Accepted Answer

如果您愿意使用 CSS，您可以创建一个类，将目标元素中每个单词的首字母大写。

CSS

.caps {
    text-transform: capitalize;
}

玉

div.caps
    each foo in ['one', 'two', 'three']
        span #{foo}

生成的 HTML

<div class="caps"><span>one</span><span>two</span><span>three</span>

结果视图

One Two Three

score 0 · Accepted Answer

如果您将 pug 与 gulp 一起使用，这可能会有所帮助：

mixin ucfirst(text)
    - text = text.charAt(0).toUpperCase() + text.slice(1);
    .
      #{text}

只需将其称为任何其他 mixin：

li
    +ucfirst(list.name)

3 回答 3