MSGraph问询：能否对MGT组件API返回的displayName属性进行截取操作？

方案1：直接在模板插值内处理（适合单一场景使用） #

直接在插值表达式中调用JavaScript字符串方法完成截取，无需额外编写JS逻辑，修改后的完整代码如下：

<mgt-person person-query="me">
  <template>
    <div>
      {{person.displayName.split(',')[1]?.trim() || person.displayName}}
    </div>
  </template>
  <template data-type="loading">
    Loading
  </template>
</mgt-person>

逻辑说明：

• 用split(',')将displayName按逗号切割为数组，示例值"Smith, John"切割后得到["Smith", " John"]
• 用?.可选链读取数组第二项，避免部分用户的displayName不含逗号时抛出下标读取错误
• 用trim()去除名字前的多余空格
• 最后加兜底逻辑，若切割后无有效第二项则直接返回原displayName，避免出现空值异常

方案2：封装全局工具函数（适合多场景复用） #

如果项目中多处需要用到该截取逻辑，可以把处理逻辑注册为MGT模板全局可用的函数，避免重复编写代码：
首先添加JS代码注册全局函数：

import { TemplateContext } from '@microsoft/mgt-element';

// 注册全局工具函数
TemplateContext.globalContext.getFirstNameFromDisplayName = (displayName) => {
  if (!displayName) return '';
  const nameParts = displayName.split(',');
  return nameParts.length > 1 ? nameParts[1].trim() : displayName;
}

之后在任意MGT模板中都可以直接调用该函数：

<div>
  {{getFirstNameFromDisplayName(person.displayName)}}
</div>

该方案的优势是后续如果需要调整截取规则，只需要修改一次函数逻辑即可，无需逐个修改模板代码。

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