JavaScript - 長いif文の条件式や、文字列はどこで折り返すのがいい?

if 文の条件式に and や or を使うと、 条件式が長くなり、見にくい場合があります。

同じように、文字列も長すぎると見にくくなります。

ここではJavaScriptで、長くなって読みにくい場合の「折り返し」(改行)の方法を紹介します。

「折り返し」の入れ方は人それぞれなので、自分が見やすいように折り返してください。

長い if 文の条件式を折り返す

下のコードは、「and(&&)」 が複数あって、長くなった条件式の例です。

今回の例では「and(&&)」ですが、「or(||)」でも同じように条件式が長くなりがちです。


if (a == 1 && b == 2 && c == 3 && d == 4){
	console.log("test");
}

この条件式を2つの方法で折り返してみます。

「and(&&)」や「or(||)」の後で折り返す

「and(&&)」の後で折り返します。


if (a == 1 && 
   b == 2 &&
   c == 3 &&
   d == 4){
	console.log("test");
}

「and(&&)」や「or(||)」の前で折り返す

「and(&&)」の前で折り返し、先頭に「and(&&)」を持ってきます。


if (a == 1 
	&& b == 2 
	&& c == 3 
	&& d == 4){
	console.log("test");
}

長い文字列を折り返す

次は、長い文字列を折り返します。

次のような文字列があるとします。


str = "長い文字列。長い文字列。長い文字列。長い文字列。長い文字列。長い文字列。";

この文字列を2つの方法で折り返してみます。

「+」を後ろに付けて折り返す

「+」演算子を付けた後に折り返します。


str = "長い文字列。長い文字列。" + 
	"長い文字列。長い文字列。" + 
	"長い文字列。長い文字列。";

「+」を前に付けて折り返す

折り返した後、先頭に「+」演算子を付けます。


str = "長い文字列。長い文字列。"
	+ "長い文字列。長い文字列。"
	+ "長い文字列。長い文字列。";

1文字分ずらした方が見やすい場合は、 スペース等を入れて見やすくするのもアリです。

どの方法でも、自分が見やすくて、 メンテナンスしやすい方法で記述すれば大丈夫です。