javascriptでif文判定が常にfalse

Question

こんにちは。
vue.jsのcomputed処理にて以下のような「30文字数以上であればカットして...を付け加える」処理を書いています。
しかしこの判定結果が常にfalseで困っています。

解決方法はありますでしょうか？
よろしくお願い致します。

computed:{
   title: function() {
      return function(arg) {
        if(arg >= 30){
          return arg.slice(0, 30) + '...'
        }else{
          return arg.slice(0, 30)
        }
      }
    }
}

Answer 1

文字列そのままの文字数を比較することはできません。
例えばargがhogeだったとしたらif('hoge'> = 30)となります。このように文字をそのまま比較すると今回の場合falseになってしまいます。
一旦String.lengthなどを使い文字数をカウントする必要があります。
ただ、String.lengthをそのまま使ってしまうとサロゲートペアの文字が2文字分としてカウントされてしまうので、spread演算子を使うことでいったん一文字ずつの配列に変換し、その要素数を数えています。

computed:{
   title: function() {
      return function(arg) {
-        if(arg >= 30){
+        if([...arg].length >= 30)
          return arg.slice(0, 30) + '...'
        }else{
          return arg.slice(0, 30)
        }
      }
    }
}

Comments

[tktail]

ご回答ありがとうございます。
丁寧な説明で１発で理解出来ました。
スプレッド演算子に関して知識が浅はかなので、それについても深堀りして考えてみます。