Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

JavaScript Line Length ควรยาวเท่าไหร่

แนวทางปฏิบัติ: ควรจำกัดความยาวบรรทัดไม่เกิน 80 ตัวอักษร (หรือ 100-120 ตาม Team Convention) เพื่อให้โค้ดอ่านง่าย ไม่ต้อง Scroll แนวนอน

ตัวอย่าง: แบบยาวเกินไป (ยากต่อการอ่าน)

function display() { var a = ""; a = a + isNaN(6234) + ": 6234<br>"; a = a + isNaN(-52.1) + ": -52.1<br>"; a = a + isNaN('') + ": ''<br>"; document.getElementById("test").innerHTML = a; }

ตัวอย่าง: ใช้ Line Breaks หลัง Operator/Comma (อ่านง่าย)

function display() {
  var a = "";
  a = a + isNaN(6234) + ": 6234<br>";
  a = a + isNaN(-52.1) + ": -52.1<br>";
  a = a + isNaN('') + ": ''<br>";
  document.getElementById("test").innerHTML = a;
}

กฎการขึ้นบรรทัดใหม่ (Line Breaking)

  • ขึ้นบรรทัดใหม่ หลัง Operator (+, -, *, /, =, &&, ||, ?, :, ฯลฯ)
  • ขึ้นบรรทัดใหม่ หลัง Comma ใน Parameter List, Array, Object
  • Indent ต่อไป 1 Level (มัก 2 หรือ 4 Spaces)
  • ไม่ขึ้นบรรทัดใหม่ก่อน Operator

ตัวอย่าง Patterns

// ✅ ดี: Break หลัง Operator
const result = veryLongVariableName +
               anotherLongVariable +
               thirdValue;

// ✅ ดี: Break หลัง Comma
function foo(
  param1,
  param2,
  param3
) { ... }

const arr = [
  item1,
  item2,
  item3
];

// ❌ ไม่ดี: Break ก่อน Operator
const result = veryLongVariableName
               + anotherLongVariable; // สับสนง่าย

Tools ช่วยจัด Format

  • Prettier - Opinionated Formatter (แนะนำ ใช้กับทีม)
  • ESLint - Linter มี Rule max-len
  • Editor Settings: editor.rulers: [80, 100, 120] ใน VS Code

Team Convention: กำหนดร่วมกันใน Project (80, 100, หรือ 120) และ Enforce ด้วย Prettier/ESLint