在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)}

提前感谢！

Answer 1

#{}的内容是作为标准JS执行的，因此您可以传入助手函数以用于类似的事情。你还没有具体说明，但假设你使用的是Jade和Express，你可以这样做：

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

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

Answer 2

如果您愿意使用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

Answer 3

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

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

只需将其称为任何其他混音：

li
    +ucfirst(list.name)