Angular中如何正确显示姓氏首字母？当前代码存在截断异常

你当前代码里用selectJobPostData.posted_by.last_name.slice(0, -4)是错误的——这个写法是从姓氏开头截取到倒数第4个字符，会把姓氏大部分内容截断，自然不符合只显示首字母的需求。

要实现姓氏仅显示首字母（比如Doe显示为D.），只需要取姓氏的第一个字符即可，有两种常用写法：

• 使用slice(0, 1)截取第一个字符
• 直接通过索引[0]获取第一个字符

修正后的完整代码如下：

<div class="posted-details">  
  <div>
    <span class="bold small-title">Posted by</span>        
    <span class="user-name-holder">          
      <a href="/users/f18b1630fdf8-p-26404332/" class="user-name" data-ui-test="user-name">          
        {{ selectJobPostData.posted_by.first_name }}           
        {{ selectJobPostData.posted_by.last_name.slice(0, 1) }}.
      </a>        
    </span>  
  </div>
</div>

或者用索引写法：

<div class="posted-details">  
  <div>
    <span class="bold small-title">Posted by</span>        
    <span class="user-name-holder">          
      <a href="/users/f18b1630fdf8-p-26404332/" class="user-name" data-ui-test="user-name">          
        {{ selectJobPostData.posted_by.first_name }}           
        {{ selectJobPostData.posted_by.last_name[0] }}.
      </a>        
    </span>  
  </div>
</div>

两种写法都能实现John Doe显示为John D.的效果，建议加上空值判断（比如姓氏为空的情况），避免出现多余的点：

{{ selectJobPostData.posted_by.first_name }}           
{{ selectJobPostData.posted_by.last_name ? selectJobPostData.posted_by.last_name[0] + '.' : '' }}

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