许多截断字符串的方法都已经被介绍过了,但是我找不到任何地方介绍过我的情况。
下面是这样一个例子:
第一个用户的语言数组:
[
{"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...
3条答案
按热度按时间nlejzf6q1#
我希望我能理解你的问题,如果没有,请告诉我。
假设我们有一个如下的数组语言:
我们希望显示前两种语言。如果其中一种语言的长度超过15,则我们将其截断为的前12个字符。然后我们在它们后面添加a + n,其中n是未显示的语言数。对吗?
在这种情况下,下面的函数处理长度超过15的语言的截断:
然后Map语言数组:(这假定数组中至少有两个对象)
如果您不确定数组中是否始终有2个对象,可以简单地使用if-else进行检查
希望这有帮助!
lg40wkob2#
只需循环遍历构建字符串的标签,并在字符串的下一个扩展超出限制时停止。
然后处理字符串仍然过长的情况(边界情况),并添加计数器(如果需要):
wnavrhmk3#
字符串的最大长度是否为15(包括逗号和空格)?还是仅包括语言字符串中的字符?
无论如何,您应该从确定最终字符串中可以容纳多少种语言开始,并将其后可能出现的任何项存储在计数器中。
我要做的第一件事是确保第一种语言中的字符不超过15个。
我想不出有哪种情况下你可以在这个15个字符的限制字符串中放入2种以上的语言,所以这应该足够了。如果没有,你可以扩展这个检查。
编辑:抱歉,这是一个我意识到的错误例子,因为有时你可能不会有多个列表项。你可以在此之前添加一个检查来确定languageLabel的长度,并在此基础上执行这些检查。这段代码假设每个人至少有2种语言。