时间戳

首页 > 解决方案 > 替换打字稿中字符串的连接部分

angular - 替换打字稿中字符串的连接部分

问题描述

我有一个变量字符串，因为它在文本区域内。用户可以写任何东西。之后有一个日期选择器。当我选择日期时，该值将写入字符串第一部分之后的文本区域。我在更换选择器时有这个功能

concatValue(){
    let dataMsg = "";
    let date: string = moment(dateTime).format('D MMM YYYY, h:mm');
    dataMsg = ". " + date;
    this.message += dataMsg;
  }

这里的问题是，如果我更改日期，字符串会保持连接并且不会重置之前的值。但我无法重置整个this.message内容，因为它包含其他文本。我怎么能做这样的事情？例如。第一次

"Hello there at Thursday 15 October 2020, 19:00"

然后我想更改日期：

"Hello there at Friday 16 October 2020, 15:00"

这就是我需要的，而不是

"Hello there at Thursday 15 October 2020, 19:00"
"Hello there at Thursday 15 October 2020, 19:00 Friday 16 October 2020, 15:00"

标签： angularstringtypescriptconcat

解决方案

我将制作自​​己的最小可重现示例，因此如果您需要对其进行调整以应用于您的用例，希望您可以。想象一下，我有这个Foo类，它需要一个message并连接日期或时间或其他东西：

class Foo {
    message: string;
    constructor(message: string) {
        this.message = message;
    }
    concatDate() {
        this.message += " @ " + new Date().toLocaleTimeString();
    }
}

let f = new Foo("hello there");
console.log(f.message); // "hello there"
f.concatDate();
console.log(f.message); // "hello there @ 12:56:10 PM"
await new Promise(resolve => setTimeout(resolve, 2000));
f.concatDate();
console.log(f.message); // "hello there @ 12:56:10 PM @ 12:56:12 PM"

糟糕，每次我调用concatDate()它都会添加到message. 我该如何解决？好吧，一个想法是，如果有任何日期字符串，您可以尝试查看message并删除它。像这样：

class BadFixFoo {
    message: string;
    constructor(message: string) {
        this.message = message;
    }
    concatDate() {
        this.message = this.message.replace(/ @[^@]*$/, "") + 
          " @ " + new Date().toLocaleTimeString();
    }
}

它有点工作：

f = new BadFixFoo("hello there");
console.log(f.message); // "hello there"
f.concatDate();
console.log(f.message); // "hello there @ 12:56:12 PM"
await new Promise(resolve => setTimeout(resolve, 2000));
f.concatDate();
console.log(f.message); // "hello there @ 12:56:14 PM"

直到它不起作用：

f = new BadFixFoo("what if I use an @-sign in the message");
console.log(f.message); // "what if I use an @-sign in the message"
f.concatDate();
console.log(f.message); // "what if I use an @ 12:56:14 PM"
await new Promise(resolve => setTimeout(resolve, 2000));
f.concatDate();
console.log(f.message); // "what if I use an @ 12:56:16 PM"

看，我用来删除日期的方法只是在 中查找最后一个@符号（在空格之后）message并删除它以及它之后的所有内容。但如果原件message上有一个@标志，那么剥离就会把它搞砸。哎呀。也许我们可以写一个更聪明的方法来识别一个日期字符串，但是如果用户真的可以为原来的 写任何东西message，我们就无法阻止他们写一个实际的日期字符串。我们想把它去掉吗？

如果不是，您需要重构，以免您试图通过取证确定原始内容message是什么。相反，存储它：

class GoodFoo {
    originalMessage: string;
    message: string;
    constructor(message: string) {
        this.originalMessage = message;
        this.message = message;
    }
    concatDate() {
        this.message = this.originalMessage + " @ " + new Date().toLocaleTimeString();
    }
}

这意味着concatDate()永远不会尝试修改当前的message. 相反，它复制originalMessage并附加到that：

f = new GoodFoo("what if I use an @-sign in the message");
console.log(f.message); // "what if I use an @-sign in the message"
f.concatDate();
console.log(f.message); // "what if I use an @-sign in the message @ 12:56:16 PM"
await new Promise(resolve => setTimeout(resolve, 2000));
f.concatDate();
console.log(f.message); // "what if I use an @-sign in the mssage @ 12:56:18 PM"

Playground 代码链接

推荐阅读