javascript 按单词截断字符串,在末尾添加未列出项的计数

yws3nbqq  于 2023-01-16  发布在  Java
关注(0)|答案(3)|浏览(104)

许多截断字符串的方法都已经被介绍过了,但是我找不到任何地方介绍过我的情况。
下面是这样一个例子:
第一个用户的语言数组:

[
    {"id": 1, "label": "English", },
    {"id": 2, "label": "French", },
]

第二个用户的语言数组:

[
    {"id": 1, "label": "English", },
    {"id": 2, "label": "French", },
    {"id": 3, "label": "German", },
    {"id": 4, "label": "Turkish", }
]

第三个用户的语言数组:

[
    {"id": 1, "label": "Farsi", },
    {"id": 2, "label": "Dutch", },
    {"id": 3, "label": "German", },
    {"id": 4, "label": "Turkish", }
    {"id": 5, "label": "English", }
]

我用逗号连接语言,如果总长度大于15,我想用单词分隔,并在末尾添加未列出的语言的计数。
请注意,如果超出限制,我不想包括最后一种语言,如下面第三个示例所示。
我想在UI中显示如下:
第一个用户:
English, French
第二个用户:
English, French, +2
第三用户:
Farsi, Dutch, +3
下面是我的连接方式:

const languageLabels = props?.languages?
      .map(({label}) => label)
      .join(", ")
      .toString()

这将为第二个示例提供如下结果:
English, French, German, Turkish
编辑:我想添加一个边缘情况。
第四个用户的语言数组:

[
    {"id": 1, "label": "Arabic (Egyptian Spoken)", },
]

在这种情况下,我希望显示:Arabic (Egyp...

nlejzf6q

nlejzf6q1#

我希望我能理解你的问题,如果没有,请告诉我。
假设我们有一个如下的数组语言:

const languages = [
    {"id": 1, "label": "English", },
    {'id': 2 , 'label': 'Arabic (Egyptian Spoken)'},
    {"id": 2, "label": "French", },
    {"id": 3, "label": "German", },
    {"id": 4, "label": "Turkish", }
    ]

我们希望显示前两种语言。如果其中一种语言的长度超过15,则我们将其截断为的前12个字符。然后我们在它们后面添加a + n,其中n是未显示的语言数。对吗?
在这种情况下,下面的函数处理长度超过15的语言的截断:

function truncateLongLanguage(language) {
    let truncatedLang = ''
    truncatedLang = language.length > 15 ? language.slice(0,12).concat('..') : language
    
    return truncatedLang
}

然后Map语言数组:(这假定数组中至少有两个对象)

let textToDisplay = languages .map(l => l.label).slice(0,2).map(l => truncateLongLanguage(l)).join(', ') + ', +' + (languages .map(l => l.label).length - 2)

如果您不确定数组中是否始终有2个对象,可以简单地使用if-else进行检查

someFunctionName (languages) {
   if (languages.length === 1) { 
       return truncateLongLanguage(languages[0].label)
   }

   return languages.map(l => l.label).slice(0,2).map(l => 
   truncateLongLanguage(l)).join(', ') + ', +' + (languages .map(l => 
   l.label).length - 2)
}

希望这有帮助!

lg40wkob

lg40wkob2#

只需循环遍历构建字符串的标签,并在字符串的下一个扩展超出限制时停止。
然后处理字符串仍然过长的情况(边界情况),并添加计数器(如果需要):

function limitedString(arr, maxlen) {
  let s = "";
  for (let i = 0; i < arr.length; i++) {
    let next = s + (i ? ", " : "") + arr[i].label;
    if (next.length > maxlen) {
      if (!i) {
        s = next.slice(0, maxlen - 3) + "...";
        i++;
      }
      return arr.length - i ? s + ", +" + (arr.length - i) : s;
    }
    s = next;
  }
  return s;
}

// The examples you have given:
const tests = [
  [{
      "id": 1,
      "label": "English",
    },
    {
      "id": 2,
      "label": "French",
    },
  ],
  [{
      "id": 1,
      "label": "English",
    },
    {
      "id": 2,
      "label": "French",
    },
    {
      "id": 3,
      "label": "German",
    },
    {
      "id": 4,
      "label": "Turkish",
    }
  ],
  [{
      "id": 1,
      "label": "Farsi",
    },
    {
      "id": 2,
      "label": "Dutch",
    },
    {
      "id": 3,
      "label": "German",
    },
    {
      "id": 4,
      "label": "Turkish",
    },
    {
      "id": 5,
      "label": "English",
    }
  ],
  [{
    "id": 1,
    "label": "Arabic (Egyptian Spoken)",
  }, ]
];

for (const test of tests) {
  console.log(limitedString(test, 15));
}
wnavrhmk

wnavrhmk3#

字符串的最大长度是否为15(包括逗号和空格)?还是仅包括语言字符串中的字符?
无论如何,您应该从确定最终字符串中可以容纳多少种语言开始,并将其后可能出现的任何项存储在计数器中。
我要做的第一件事是确保第一种语言中的字符不超过15个。

let finalString = ""
let counter = 0
if (languageLabels[0].length > 15 || (languageLabels[0].length + languageLabels[1].length) > 13){ //Both of these cases will mean you can only display the first language (if you don't want to substring the second language)
//13 because counting comma and whitespace, 15 if not.
    finalString = languageLabels[0].substring(0, 12) //If the absolute maximum length of this string is 15, this is to control for the ellipses. If not, change the 12 to a 15.
    finalString.concat("...") //as per your example at the end of the post
    for (let i = 1; i < languageLabels.length; i++) { //i is 1 here instead of 0 because we already grabbed the 0 index for finalString. You would set this to 2 if you grabbed *both* the first and second (0 and 1 index) languages, and so on.
        counter += 1
    }
    finalString.concat(" +").concat(counter)
} else {
    finalString = languageLabels[0].concat(", ".concat(languageLabels[1])
    for (let i = 2; i < languageLabels.length; i++) {
        counter += 1
    }
    finalString.concat(" +").concat(counter)

我想不出有哪种情况下你可以在这个15个字符的限制字符串中放入2种以上的语言,所以这应该足够了。如果没有,你可以扩展这个检查。
编辑:抱歉,这是一个我意识到的错误例子,因为有时你可能不会有多个列表项。你可以在此之前添加一个检查来确定languageLabel的长度,并在此基础上执行这些检查。这段代码假设每个人至少有2种语言。

相关问题