JavaScript初学者：如何编写包含if语句的箭头函数

嘿，作为JavaScript初学者，能主动尝试转换函数写法真的很棒！咱们来一步步把你的常规函数改成带if语句的箭头函数，其实逻辑完全一致，只是语法上做些调整~

首先先回顾下你的原函数（已经帮你格式化了，看起来更清晰）：

function getStringLength(string){ 
  let stringLength; 
  if (string.length === 1){ 
    stringLength = `La chaîne contient qu'un seul caractère`; 
  } else { 
    stringLength = `La chaîne contient ${string.length} caractères`; 
  } 
  return stringLength; 
}

这个函数的逻辑很明确：接收一个字符串，判断其长度是否为1，返回对应的法语提示文本。接下来咱们把它转成箭头函数：

写法一：完全对应原逻辑的箭头函数 #

箭头函数如果要包含多条语句（比如你的if/else逻辑），必须用大括号包裹函数体，而且需要显式写return（因为大括号会让箭头函数失去隐式返回的特性）。另外，箭头函数本身是匿名的，所以通常会把它赋值给一个变量或常量：

const getStringLength = (string) => {
  let stringLength;
  if (string.length === 1) {
    stringLength = `La chaîne contient qu'un seul caractère`;
  } else {
    stringLength = `La chaîne contient ${string.length} caractères`;
  }
  return stringLength;
};

这里参数只有一个，你也可以省略括号，写成string => { ... }，两种写法都没问题，保留括号会让代码在参数数量变化时更易维护。

写法二：简化变量的箭头函数 #

咱们可以去掉中间的stringLength变量，直接在条件分支里返回结果，这样代码更紧凑：

const getStringLength = string => {
  if (string.length === 1) {
    return `La chaîne contient qu'un seul caractère`;
  } else {
    return `La chaîne contient ${string.length} caractères`;
  }
};

这种写法和原函数逻辑完全一致，只是少了一个中间变量，可读性也不错。

额外扩展：更简洁的三元表达式写法 #

虽然你明确要带if语句的写法，但可以提一下，如果逻辑比较简单，还可以用三元表达式简化成一行（这是箭头函数的常用简化方式）：

const getStringLength = string => 
  string.length === 1 
    ? `La chaîne contient qu'un seul caractère` 
    : `La chaîne contient ${string.length} caractères`;

这里没有大括号，箭头函数会隐式返回三元表达式的结果，代码更短，但如果逻辑复杂的话，还是带if的写法更易读。

最后再划个重点：

• 当箭头函数的函数体有多条语句时，必须用大括号包裹，并且要显式写return；
• 单个参数可以省略括号，多个参数必须加括号；
• 箭头函数是匿名函数，需要赋值给变量/常量才能重复调用。

内容的提问来源于stack exchange，提问作者Mathéo Perrot