Angular使用json管道输出字符串时如何移除自带的双引号

json是Angular内置的序列化管道，作用是将输入值转换为符合JSON规范的字符串格式，字符串类型值序列化后默认包裹双引号属于预期行为。

方案1：直接输出原始值（最推荐） #

如果你的item.name本身就是字符串类型，完全不需要通过json管道转义，直接在模板中写：
{{item.name}}
即可直接输出不带引号的内容，性能最优且无额外适配成本。

方案2：自定义管道处理（JS/TS方案，生产环境推荐） #

如果存在必须使用json管道的特殊场景（比如需要兼容输出多种类型值，仅字符串需要去除引号），可以自定义管道处理序列化后的结果：

1. 执行Angular CLI命令生成管道：
   ng generate pipe remove-json-quotes
2. 编辑管道逻辑：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'removeJsonQuotes',
  standalone: true // Angular 14+  standalone项目保留，非standalone项目删除该行，在对应module的declarations中声明管道即可
})
export class RemoveJsonQuotesPipe implements PipeTransform {
  transform(value: string): string {
    // 仅删除首尾双引号，不影响内容中间的双引号
    return value.replace(/^"|"$/g, '');
  }
}

3. 模板中使用：
   {{item.name | json | removeJsonQuotes}}

方案3：CSS实现（不推荐生产使用） #

如果仅需要展示层面隐藏引号，不需要修改实际输出值，可以用CSS实现，弊端是复制内容时仍会携带引号，且需要和父元素背景色适配：

1. 模板中包裹输出内容：

<span class="hide-quotes">{{item.name | json}}</span>

2. 对应CSS样式：

.hide-quotes {
  position: relative;
  padding: 0 1px;
}
/* 用背景色块遮挡首尾的双引号 */
.hide-quotes::before,
.hide-quotes::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #fff; /* 修改为和当前内容父容器一致的背景色 */
}
.hide-quotes::before {
  left: 0;
}
.hide-quotes::after {
  right: 0;
}

• 补充说明：你给出的JSON示例存在语法错误，同一个对象不能声明两个同名name属性，修正后应为 people = [{name: "NameA"}, {name: "NameB"}]

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