创建一个可变长度的字符串,填充一个重复的字符

IT技术 javascript html string
2021-02-19 10:37:34

因此,我的问题已被其他人以 Java 形式在这里提出:Java - 创建一个具有指定长度并填充特定字符的新 String 实例。最佳解决方案?

. . . 但我正在寻找它的 JavaScript 等价物。

基本上,我想根据每个字段的“maxlength”属性用“#”字符动态填充文本字段。因此,如果输入具有maxlength="3",则该字段将填充为“###”。

理想情况下会有类似 Java 的东西StringUtils.repeat("#", 10);,但到目前为止,我能想到的最佳选择是循环并附加“#”字符,一次一个,直到达到最大长度。我不能动摇有一种比这更有效的方法来做到这一点的感觉。

有任何想法吗?

仅供参考 - 我不能简单地在输入中设置默认值,因为“#”字符需要在焦点上清除,并且如果用户没有输入值,则需要在模糊时“重新填充”。这是我关心的“补充”步骤

6个回答

做到这一点的最好方法(我见过)是

var str = new Array(len + 1).join( character );

这将创建一个具有给定长度的数组,然后将它与给定的字符串连接起来进行重复。.join()无论元素是否已分配值,函数都遵循数组长度,并且未定义的值呈现为空字符串。

您必须将 1 添加到所需的长度,因为分隔符字符串位于数组元素之间

请注意,此解决方案非常慢。它看起来很性感,但可能正是这样做的错误方式。
2021-04-25 10:37:34
搞定了。:) 我只需要记住在使用parseInt()输入 maxlength 值来调整数组大小之前使用它。正是我要找的。. . 谢谢!
2021-04-26 10:37:34
repeatString.prototype 内置的函数现在可以处理这个问题(ES6+)
2021-05-04 10:37:34
生病的解决方案。谢谢!
2021-05-07 10:37:34

试试这个:P

s = '#'.repeat(10)

document.body.innerHTML = s

现在是 2018 年,ES6 已经成熟——这应该是公认的答案。如果需要为那些不使用 Babel 或类似工具的人支持旧浏览器,您可以使用上面提到的 lodash,或者使用 polyfill 进行备份。
2021-04-16 10:37:34
绝对是最简单的实现,但也是最不受支持的,因为它是 ECMAScript 6 的一部分。看起来,现在,它只在 Firefox、Chrome 和桌面版 Safari 中受支持。
2021-04-18 10:37:34
如果您不介意使用lodash,则可以使用以下内容: _.repeat('*',10);
2021-04-20 10:37:34
可惜不兼容IE
2021-05-01 10:37:34
@seanTcoyote 正如我所愿,仍有人不得不与 IE 11 和 Adroid 的 Webviews 抗衡,但两者都不支持该repeat()方法。期待着不用管他们的那一天,我自己。. .
2021-05-12 10:37:34

ES2015 最简单的方法是做类似的事情

'X'.repeat(data.length)

X是任何字符串,data.length是所需的长度。

请参阅:https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat

今天阅读本文的人的最佳答案。
2021-05-09 10:37:34

不幸的是,虽然这里提到的 Array.join 方法很简洁,但它比基于字符串连接的实现慢了大约 10 倍。它在大字符串上的表现尤其糟糕。有关完整的性能详细信息,请参见下文。

在 Firefox、Chrome、Node.js MacOS、Node.js Ubuntu 和 Safari 上,我测试的最快实现是:

function repeatChar(count, ch) {
    if (count == 0) {
        return "";
    }
    var count2 = count / 2;
    var result = ch;

    // double the input until it is long enough.
    while (result.length <= count2) {
        result += result;
    }
    // use substring to hit the precise length target without
    // using extra memory
    return result + result.substring(0, count - result.length);
};

这是冗长的,所以如果你想要一个简洁的实现,你可以采用天真的方法;它的性能仍然比 Array.join 方法好 2 到 10 倍,并且也比小输入的加倍实现更快。代码:

// naive approach: simply add the letters one by one
function repeatChar(count, ch) {
    var txt = "";
    for (var i = 0; i < count; i++) {
        txt += ch;
    }
    return txt;
}

更多信息:

@Hogan您的解决方案不会从任何地方创建填充字符串。您自己创建它,然后只需提取一个子字符串。
2021-04-24 10:37:34
对于超大字符串,这种方法比 Node.js 中的 Array.join 慢 10 倍。
2021-05-08 10:37:34
这仍然比我的解决方案慢得多(2 到 3 个数量级)。
2021-05-12 10:37:34

我会创建一个常量字符串,然后在它上面调用子字符串。

就像是

var hashStore = '########################################';

var Fiveup = hashStore.substring(0,5);

var Tenup = hashStore.substring(0,10);

也快了一点。

http://jsperf.com/const-vs-join

哦,而且,另一方面(我意识到这实际上更像是一种文体问题,而不是程序化问题),维护一个仅用于 3-4 个字符的 30 多个字符串并不适合我也是 。. . 再次,围绕解决方案针对各种用例的灵活性的一个小问题。
2021-04-18 10:37:34
@Hogan - 完全同意。. . 而且,这实际上也是我没有非常重视速度的部分原因。在我的特定用例中,我正在寻找三个长度分别为 3、3 和 4 个字符的字符串。虽然 Pointy 的解决方案最慢,但由于字符串很短而且只有几个,我选择了他的解决方案,因为我喜欢它流线型、易于阅读和易于维护的事实。最后,对于问题的不同变体,它们都是很好的解决方案。. . 这完全取决于您的具体情况的优先级。
2021-04-23 10:37:34
@talemyn 在 IT 中,一切都需要权衡。有一个 4 个字符的字符串并使其变大或有一个 30 个字符的字符串,不用担心。总而言之,任何大小的常量字符串——甚至 1k,在现代机器上都是很小的资源使用。
2021-04-25 10:37:34
这是非常聪明的!它甚至适用于包含多个字符的字符串模式。
2021-04-29 10:37:34
只是重新访问此页面,因为它似乎一直受到很多关注,并想对您的解决方案发表评论。虽然我非常喜欢你的方法的简单性和速度,但我最关心的是维护/重用。虽然在我的特定场景中,我不需要超过 4 个字符,但作为通用函数,使用固定长度的字符串意味着您必须返回并更新字符串,如果您的用例需要更多字符。其他两种解决方案在这方面具有更大的灵活性。不过,速度为 +1。
2021-05-03 10:37:34