作爲參數傳遞的最長字符串的長度

Question

我似乎無法圍繞這一點纏住我的頭。我想要的是一個文本框，在其中輸入1234,12345,12346並返回傳遞的最長字符串的整數。因此，上述將返回6.

我有以下的JavaScript代碼的文本框：

var titleInput = document.getElementById("textBoxValue"); 
function countString() 
    { 
var string = titleInput.value; // Does not work 
//var string = ["123", "1234"]; works with out text box returns 4 hard coded 
console.log(string); // returns ["123, 1234"] 

var largest = 0; // set largest to 0 
for (var i = 0; i < string.length; i++) { 
    if (string[i].length > largest) { 
    largest = string[i].length; 

    } 
} 
console.log(largest); 
} 
countString(); 

我不明白爲什麼它的工作原理，當硬編碼而是從文本框中提交時，它不。

Answer 1

對於代碼的功能，必須在文本框的值分成數組，使用split（）方法並將其用作「字符串」變量（避免使用變量名稱的保留字！）。否則，使用字符串[i]語句，您將訪問字符串的各個字符，而不是用逗號分隔的實際子字符串。所以，你的函數應該結束這樣的：

var titleInput = document.getElementById("textBoxValue"); 

function countString() { 
var str = titleInput.value.split(','); 
console.log(str); 

var largest = 0; 
for (var i = 0; i < str.length; i++) 
    if (str[i].length > largest) 
     largest = str[i].length; 
console.log(largest); 
} 

countString(); 

Answer 2

要想從文本框中的數組，你可以使用

var titleInput = document.getElementById("text"), 
    arr = titleInput.value.split(', '); 

而獲得最大的長度，你可以用這些

• ES5 reduce一個一起使用Math.max：

  arr.reduce(function(prev, curr) { 
      return Math.max(prev, curr.length) 
  }, 0); 
  

• ES5 map：

  Math.max.apply(null, arr.map(function(str){ 
      return str.length; 
  })); 
  

• ES5 map，與ES6 spread operator和arrow functions簡化：

  Math.max(...arr.map(str => str.length));