如何在JavaScript中使数组成为一个 * 漂亮 * 的人类可读列表?

wydwbb8l  于 2022-12-17  发布在  Java
关注(0)|答案(7)|浏览(116)

我有一个允许的文件扩展名列表,可以上传到我的网站。
我用jQuery Validation plugin检查它们。
如果他们选择了不支持的扩展名,我将显示一条错误消息。
看起来

var msg = 'You may only upload files of type ' + allowedExt.join(', ');

很明显,这个列表看起来不太闪,我希望它看起来更“人类可读”。
有什么办法吗?

kfgdxczn

kfgdxczn1#

对于alex给出的答案,一个更简单的方法是使用.pop()去掉最后一个元素:

var niceList = function(array, join, finalJoin) {
    var arr = array.slice(0), last = arr.pop();
    join = join || ', ';
    finalJoin = finalJoin || ' and ';
    return arr.join(join) + finalJoin + last;    
};
iq3niunx

iq3niunx2#

可接受的答案不能很好地处理一个项目列表。

function niceList(array) {
  if (!array || array.length == 0) return "";
  var clone = array.slice(0);

  return function build() {
    if (clone.length == 1) return clone[0];
    if (clone.length == 2) return clone[0] + ' and ' + clone[1];
    return clone.shift() + ", " + build();
  }();  
}
lg40wkob

lg40wkob3#

只是另一种方法。
审议的案件:

  • [] -〉“”
  • [""] -〉“”
  • [“A”] -〉“A”
  • [“A”、“B”] -〉“A和B”
  • [“A”、“B”、“C”] -〉“A、B和C”

...等等

function niceList(a) {
    return [
            a

            /* Get all the elements except the last one.
             * If there is just one element, get that
             */
            .slice(0, a.length - 1 || 1)

            /* Create a comma separated string from these elements */
            .join(", ")
        ]
        /* Process the last element (if there is one) and concat it
         * with the processed first part.
         */
        .concat(
            a

            /* Create a copy */
            .slice()

            /* Take the last element, if there is one */
            .splice(-1, Number(a.length > 1))
        )

        /* Join the two processed parts */
        .join(" and ");
}
soat7uwm

soat7uwm4#

你可以的!

var niceList = function(array, join, finalJoin) {       
    join = join || ', ';
    finalJoin = finalJoin || ' and ';       
    var length = array.length;      
    return array.slice(0, length - 1).join(join) + finalJoin + array[length - 1];    
};

alert(niceList([a, b, c])); // 'a, b and c'
mzaanser

mzaanser5#

显然,我们提供的答案与alex的不同,下面是一个没有join的答案:

function niceList(array, join, final) {
   return array.reduce(function (pv, cv, i, a) { 
      return pv + (i == a.length - 1 ? final : join) + cv; 
   });
};

不适用于旧浏览器等。

7y4bm7vi

7y4bm7vi6#

我把你的字面意思,并使它成为一个实际的HTML列表。

var extensions = ['html', 'txt', 'png', 'jpg'];
var extension_list = '<ul>';

for(i=0; i<extensions.length; i++)
{
    extension_list += '<li>'+extensions[i]+'</li>';
}

extension_list += '<ul>';

var msg = '<p>Sorry, you can only upload the following extensions:</p>'+extension_list;
rqdpfwrv

rqdpfwrv7#

我觉得这个答案需要一些时间,在2022年,我们有一个API,它支持多种语言和约定(这可以为每个用户确定)。
Intl.ListFormat API:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat
用法示例如下:

const allowedExt = [
    '.jpeg',
    '.png',
    '.gif',
    '.webp'
]
const listFormatter = new Intl.ListFormat('en', {
    style: 'long',
    type: 'conjunction'
})
listFormatter.format(allowedExt)
// .jpeg, .png, .gif, and .webp

相关问题