脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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 字符串含中文下对齐的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 微信小程序中使用javascript 回调函数

    微信小程序中使用javascript 回调函数

    这篇文章主要介绍了微信小程序中使用javascript 回调函数的相关资料,需要的朋友可以参考下
    2017-05-05
  • CheckBox 如何实现全选？

    CheckBox 如何实现全选？

    CheckBox 如何实现全选？...
    2006-06-06
  • JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器

    JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器

    这篇文章主要介绍了触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-10-10
  • 关于JavaScript 中 if包含逗号表达式

    关于JavaScript 中 if包含逗号表达式

    这篇文章主要介绍了 关于JavaScript 中 if包含逗号表达式，有时会看到JavaScript中if判断里包含英文逗号 “,”，这个是其实是逗号表达式。在if条件里，只有最后一个表达式起判断作用。下面来看看文章的具体介绍吧
    2021-11-11
  • JavaScript利用html5新方法操作元素类名详解

    JavaScript利用html5新方法操作元素类名详解

    这篇文章主要给大家分享的是JavaScript用html5新方法操作元素类名的详解，早先JavaScript处理起来特别不方便，需要先取到class属性，然后对字符串进行处理。现在html5给所有元素增加了classList属性来操作类属性，非常方便，下面就一起来看看具体操作过程吧
    2021-11-11
  • 详解微信小程序Radio选中样式切换

    详解微信小程序Radio选中样式切换

    这篇文章主要介绍了详解微信小程序Radio选中样式切换的相关资料,需要的朋友可以参考下
    2017-07-07
  • arrify 转数组实现示例源码解析

    arrify 转数组实现示例源码解析

    这篇文章主要为大家介绍了arrify 转数组实现示例源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • 微信小程序之滚动视图容器的实现方法

    微信小程序之滚动视图容器的实现方法

    这篇文章主要介绍了微信小程序之滚动视图容器的实现方法的相关资料,希望通过本文能帮助到大家，让大家掌握这部分内容，需要的朋友可以参考下
    2017-09-09
  • JavaScript执行机制详细介绍

    JavaScript执行机制详细介绍

    这篇文章主要介绍了JavaScript执行机制，想要搞懂JavaScript执行机制，便与进程与线程的概念脱不了干系，下面我们就来看看这JavaScript执行机制的具体介绍吧,需要的朋友可以参考一下
    2021-12-12
  • 微信小程序（二）Window 配置详细介绍

    微信小程序（二）Window 配置详细介绍

    这篇文章主要介绍了微信小程序（二）Window 配置详细介绍的相关资料,需要的朋友可以参考下
    2016-09-09

最新评论