截取姓名中最后两个字采用了Vue + Ant Design of Vue，在处理头像时，无头像显示用户的名称（姓名），过

背景

采用了Vue + Ant Design of Vue，在处理头像时，无头像显示用户的名称（姓名），过长则截取名称中最后两位汉字。

思路

有头像时，显示头像，无头像时，判断是否有用户名，有则判断用户名长度，大于2时进行截取，反之不截取，没有用户名则显示用户icon。

利用正则匹配第一个汉字字符串，再利用substr截取最后两位。

实现

/** 
 * 格式化姓名，获取姓名最后两位 
 * @param {string} name  
 */
export const formatName = (name = '') => {
  if (!name) return ''
  const reg = /[\u4E00-\u9FA5]+/
  const result = name.match(reg) || []
  const str = result[0] || ''
  if (!str[2]) return str
  return str.substr(str.length - 2, 2)
}

可以直接引入使用，也可注册为全局filter
/**
 * 姓名管道
 */
Vue.filter('formatName', value => {  
  return formatName(value)
})

总结

根据实际的情况，做不同的处理，比如我们的用户名称，有的会出现小括号，遇到这种情况，就利用正则匹配了第一段汉字进行截取。