JavaScript链式连接函数？

Posted 2023-02-24

【中文标题】JavaScript链式连接函数？

【英文标题】：JavaScript chained concatenation function?

【发布时间】：2015-08-17 23:29:58

【问题描述】：

请不要使用 jQuery！

Web 上说 JS 原生的 String.concat() 和 join() 函数由于性能不佳而应避免使用，而简单的 >for() 循环的 += 分配应该工作得更快。

所以我试图在纯 javascript 中创建一个连接字符串的函数。这在某种程度上是我的设想：

我想要一个主函数 concatenate()，它将连接所有传递的参数，并在每个连接的参数之后插入一个变量字符串，除了最后一个。

李>

如果主函数被自己调用并且没有链式 .using() 函数，那么该变量字符串应该是一个空字符串，这意味着结果中没有分隔符。

我想要一个链式子函数 .using()，它会告诉主 concatenate() 函数除了默认的 '' 空之外的特定字符串在每个连接段之后添加的字符串。

理论上，它应该是这样工作的：

concatenate('a','b','c');              /* result: 'abc'   */
concatenate('a','b','c').using('-');   /* result: 'a-b-c' */

我想避免使用两个单独的函数，例如 concatenate() 和 concatenateUsing()，因为 concatenateUsing() 变体会必须使用特殊的常量参数（如 arguments[0] 或 arguments[arguments.length-1]）作为注入的分隔符，这将非常不整洁。另外，我总是会忘记是哪一个。

我还想避免使用两个独立的子方法取代 Concatenate 对象，例如 Concatenate.strings() 和 Concatenate.using() 或类似的。

这是我迄今为止的一些失败尝试......

尝试 #1：

function concatenate()

  var result="";
  if(this.separator===undefined)var separator=false;

  for(var i=0; i<arguments.length; i++)
  result += arguments[i] + ((separator && (i<arguments.length-1))?separator:'');

  this.using=function(x)
  
    this.separator=x;
    return this;
  

  return result;

所以我想做的是：

检查 separator 变量是否未定义，这意味着它还没有从子方法中设置。

如果未定义，则使用值 false 声明它以供以后评估。

运行串联，如果 separator 的值不同于 false，则在每个串联步骤中使用它 - 只要它不是最后一次迭代。

然后返回结果。

子方法 .using(x) 应该在某个地方设置 分隔符变量的值。

当然，这是行不通的。

尝试 #2：

var concatenate = function()

  var result="";
  var separator="";
  for(var i=0; i<arguments.length; i++)
    result += arguments[i] + ((separator && (i<arguments.length-1))?separator:'');
  return result;


concatenate.prototype.using=function(x)

  this.separator=x;
  return this;

它也不起作用，我假设当 this 从 using() 子方法返回时，var separator=""concatenate() 函数的 /em> 只是再次用 "" 覆盖值。

我现在尝试了 4 或 5 种不同的方法，但我不想让你和其他所有方法一样无聊。

有人知道这个难题的解决方案吗？ 提前非常感谢！

【问题讨论】：

网络上有很多东西，其中很多是错误的或过时的。请链接您找到的声明。

索赔：developer.mozilla.org/docs/Web/JavaScript/Reference/… 证明：jsperf.com/concat-vs-plus-vs-join

是的，如果您需要连接两个字符串值，建议使用 + 运算符而不是 .concat() 调用（及其所有开销）。然而，这并没有说明join，它很大程度上取决于你的值来自哪里（变量？文字？数组项？）。您作为“证明”链接的 jsperf 存在缺陷，this 将是一个更好的比较（尽管它仍然是一个微基准并且在各种引擎中存在过度优化）

【参考方案1】：

你想做的事是不可能的。

您不能将某些内容链接到返回基元的方法调用，因为基元没有（自定义）方法¹。 而且你不能让第一个函数返回不同的东西，这取决于某个东西是否被链接，因为它不知道它的调用上下文，并且必须在方法调用被评估之前返回结果。

最好的办法是返回一个可以使用自定义toString 方法进行字符串化的对象，并且还提供using 的东西。这将类似于

function concatenate() 
    return 
        args: Array.from(arguments), // ES6 for simplicity
        using: function(separator) 
            return this.args.join(separator);
        ,
        toString: function() 
            return this.args.join("");
        
    ;


console.log(String(concatenate('a','b','c')); // result: 'abc'
// alternatively, use ""+… or explicitly call the ….toString() method
console.log(concatenate('a','b','c').using('-')); // result: 'a-b-c'

_{1：不，你不想知道workarounds。}