Vue.js方法中传入字符串调用trim()无效问题求助

嘿，我一眼就瞅出你代码里的问题啦！问题出在JavaScript字符串的不可变性上——你调用的toLowerCase()和trim()方法并不会直接修改原字符串，而是返回一个处理后的新字符串，但你没把这个新结果重新赋值给变量，所以原来的str根本没变化！

修复后的代码 #

把你的whiteSpace方法改成这样就行：

methods:{
  whiteSpace: function(a){
    let str = a;
    // 先转小写，再移除首尾空格；如果要移除所有空格（包括中间），用下面的replace
    str = str.toLowerCase().trim();
    // 若需要移除所有空格（比如"Hello World"变成"helloworld"），替换成这行：
    // str = str.toLowerCase().replace(/\s/g, '');
    console.log(str);
    return str;
  }
}

为什么原来的代码无效？ #

在JavaScript中，字符串是**不可变（immutable）**的——一旦创建就不能被修改。所有像trim()、toLowerCase()、replace()这类字符串方法，都会返回一个全新的字符串，而不是修改原变量的值。你之前只是调用了方法，但没把返回的新字符串存回str，所以str还是最初传入的原始值，自然看不到空格被移除的效果。

比如你原来的代码：

var str = a;
str.toLowerCase(); // 返回新字符串，但没赋值给str
str.trim(); // 同样返回新字符串，也没赋值

这两行相当于“做了处理但没保存结果”，所以str还是原来的a。

现在修改后，把处理后的结果重新赋值给str，就能得到你想要的无空格字符串啦！

内容的提问来源于stack exchange，提问作者Jonas Tamoševičius