如何在AngularJS模板中对{{@key}}执行字符串截取？

问题 #

我是TypeScript和AngularJS的新手，当前使用如下代码渲染一系列<div>元素：

{{#if styles}}
  <h2 class="box-header">Styles</h2>
  <div class="box">
  {{#each styles}}
    <div class="item">
      {{#if thumbnail}}
        <img src="{{public_url}}styles/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
      {{else}}
        <img src="{{public_url}}images/placeholder.png{{&key_query}}" alt="{{name}} preview" />
      {{/if}}
      <div class="details">
        <h3>{{name}}</h3>
        <p class="identifier">identifier: {{@key}}</p>
      </div>
    </div>
  {{/each}}
  </div>
{{/if}}

其中标识符行<p class="identifier">identifier: {{@key}}</p>的HTML输出值包括：

identifier: base_name
identifier: example_000_0_name_1
identifier: example_000_1_name_2
identifier: example_000_2_name_3
identifier: example_000_3_name_4
identifier: example_000_4_name_5

我希望生成HTML时移除example_000_[n]_前缀，预期输出为：

identifier: base_name
identifier: name_1
identifier: name_2
identifier: name_3
identifier: name_4
identifier: name_5

尝试在{{}}中直接调用字符串方法（比如{{@key.substr(3)}}、{{("" + @key).substr(3)}}）均出现解析错误：

• 尝试{{@key.substr(3)}}的错误信息：

Error: Parse error on line 35:
...>identifier: {{@key.substr(3)}}</p>    
-----------------------^
Expecting 'ID', got 'INVALID'

• 尝试{{("" + @key).substr(3)}}的错误信息：

Error: Parse error on line 35:
...fier">identifier: {{("" + @key).substr(3
-----------------------^
Expecting 'ID', 'STRING', 'NUMBER', 'BOOLEAN', 'UNDEFINED', 'NULL', 'DATA', got 'OPEN_SEXPR'

请问如何在<p class="identifier">identifier: {{@key}}</p>中对{{@key}}执行字符串截取？

解决方案 #

你用的是Handlebars模板语法，原生Handlebars不支持直接在模板内调用JS原生字符串方法，需要用以下两种方式解决：

方法1：自定义Handlebars助手函数 #

在JS代码里注册一个自定义助手，专门处理@key的前缀截取逻辑：

// 注册自定义字符串处理助手
Handlebars.registerHelper('trimKeyPrefix', function(key) {
  // 用正则匹配并移除指定前缀
  return key.replace(/^example_000_\d+_/, '');
});

然后在模板中调用这个助手：

<p class="identifier">identifier: {{trimKeyPrefix @key}}</p>

方法2：预处理数据后再渲染 #

在把styles数据传给模板之前，提前处理每个键的名称，生成一个干净的字段：

// 假设styles是待渲染的原始对象
const processedStyles = {};
Object.keys(styles).forEach(key => {
  let cleanKey = key;
  // 移除指定前缀
  if (key.includes('example_000_')) {
    cleanKey = key.replace(/^example_000_\d+_/, '');
  }
  // 保留原数据，新增cleanKey字段
  processedStyles[key] = { ...styles[key], cleanKey };
});
// 后续将processedStyles传入模板渲染

之后直接在模板中使用预处理好的字段：

<p class="identifier">identifier: {{cleanKey}}</p>

内容的提问来源于stack exchange，提问作者stackbiz