脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → js 字符串含中文下对齐

js 字符串中文下对齐问题解析

 更新时间：2023年07月24日 10:30:37   作者：点墨  
这篇文章主要为大家介绍了js字符串含中文下对齐问题解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

问题

在中文下对齐字符串会出现问题，原因是中文字符占两个字节，如下所示

let val = [
    {
        title:"错嫁豪门：萌娃集合，把渣爹搞破产",
        author:"左暮颜傅寒苍"
    },
     {
        title:"惊！未婚女星竟被萌娃追着叫妈",
        author:"大雪无声"
    }
]
function test(){
    for(let i=0;i<val.length;i++){
        let title = alignStr(val[i].title,{len:80});
         let author = alignStr(val[i].author,{len:40});
        console.log(title + author);
    }
}
test();

解决

使用正则替换，将中文字符转换为英文字符，再进行处理

function alignStr(strVal, { len, padChar = " ", shouldCut = true }) {
  if (!len || typeof len != "number") return strVal;
  if (!strVal) {
    return padChar.repeat(len);
  } else {
    const strLen = strVal.replace(/[^\\x00-\\xff]/ig, "aa").length;
    const remainLen = len - strLen;
    if(remainLen<0){
      return shouldCut ? strVal.substring(0, len) : strVal;
    }else if(remainLen > 0){
        return strVal + padChar.repeat(remainLen);
    }else{
        return strVal;
    }
  }
}

效果

let val = [
    {
        title:"错嫁豪门：萌娃集合，把渣爹搞破产",
        author:"左暮颜傅寒苍"
    },
     {
        title:"惊！未婚女星竟被萌娃追着叫妈",
        author:"大雪无声"
    }
]
function test1(){
    for(let i=0;i<val.length;i++){
        let title = val[i].title.padEnd(80);
         let author = val[i].author.padEnd(40);
        console.log(title + author);
    }
}
test1();
function alignStr(strVal, { len, padChar = " ", shouldCut = true }) {
  if (!len || typeof len != "number") return strVal;
  if (!strVal) {
    return padChar.repeat(len);
  } else {
    let newStrVal = strVal;
    const strLen = newStrVal.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/ig, "  ").length;
    const remainLen = len - strLen;
    if(remainLen<0){
      return shouldCut ? newStrVal.substring(0, len) : newStrVal;
    }else if(remainLen > 0){
        return newStrVal + padChar.repeat(remainLen);
    }else{
        return newStrVal;
    }
  }
}

以上就是js 字符串中文下对齐问题解析的详细内容，更多关于js 字符串含中文下对齐的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 微信小程序 Tab页切换更新数据

    微信小程序 Tab页切换更新数据

    这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下
    2017-01-01
  • JS前端同源策略和跨域及防抖节流详解

    JS前端同源策略和跨域及防抖节流详解

    这篇文章主要为大家介绍了JS前端同源策略和跨域及防抖节流详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • ResizeObserver API使用示例详解

    ResizeObserver API使用示例详解

    这篇文章主要为大家介绍了ResizeObserver API使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • JS前端错误监控捕获以及上报方法详解

    JS前端错误监控捕获以及上报方法详解

    这篇文章主要为大家介绍了前端错误监控捕获以及上报方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • JS高级ES6的6种继承方式

    JS高级ES6的6种继承方式

    这篇文章主要和大家分享的事JS高级ES6的6种继承方式，继承是面向对象中老生常谈的一个内容，在ECMAScript6之前，JavaScript中的继承可谓是非常的繁琐的，有各种各样的继承，本质上所有的继承都是离不开原型链的，更多详细内容请感兴趣的小伙伴参考下面文章内容吧
    2021-12-12
  • JavaScript的八种数据类型

    JavaScript的八种数据类型

    这篇文章主要分享的是JavaScript的八种数据类型，ES5的时候，我们大家认知的数据类型是 6种的，但是ES6 中新增了一种 Symbol，谷歌67版本中还出现了一种 bigInt，是指安全存储、操作大整数，像下面文章我可没就来看看这八种数据类型的详细介绍吧
    2022-01-01
  • wasm+js实现文件获取md5示例详解

    wasm+js实现文件获取md5示例详解

    这篇文章主要为大家介绍了wasm+js实现md5文件获取示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • 无感知刷新Token示例简析

    无感知刷新Token示例简析

    这篇文章主要为大家介绍了无感知刷新Token及认证原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • JavaScript实现余额数字滚动效果

    JavaScript实现余额数字滚动效果

    这篇文章主要介绍了JavaScript实现余额数字滚动效果，将传入的带滚动的n位数字拆分成每一个要滚动的数，然后动态的创建装着滚动到每一位相应数字的容器，然后放入传入的目标容器中，更多详细内容，一起进入下面文章学习吧
    2021-12-12
  • VBScript版代码高亮

    VBScript版代码高亮

    VBScript版代码高亮...
    2006-06-06

最新评论