eslint/docs/src/rules/no-implicit-coercion.md

   1 ---
   2 title: no-implicit-coercion
   3 layout: doc
   4 rule_type: suggestion
   5 ---
   6
   7
   8
   9 In JavaScript, there are a lot of different ways to convert value types.
  10 Some of them might be hard to read and understand.
  11
  12 Such as:
  13
  14 ```js
  15 var b = !!foo;
  16 var b = ~foo.indexOf(".");
  17 var n = +foo;
  18 var n = 1 * foo;
  19 var s = "" + foo;
  20 foo += ``;
  21 ```
  22
  23 Those can be replaced with the following code:
  24
  25 ```js
  26 var b = Boolean(foo);
  27 var b = foo.indexOf(".") !== -1;
  28 var n = Number(foo);
  29 var n = Number(foo);
  30 var s = String(foo);
  31 foo = String(foo);
  32 ```
  33
  34 ## Rule Details
  35
  36 This rule is aimed to flag shorter notations for the type conversion, then suggest a more self-explanatory notation.
  37
  38 ## Options
  39
  40 This rule has three main options and one override option to allow some coercions as required.
  41
  42 * `"boolean"` (`true` by default) - When this is `true`, this rule warns shorter type conversions for `boolean` type.
  43 * `"number"` (`true` by default) - When this is `true`, this rule warns shorter type conversions for `number` type.
  44 * `"string"` (`true` by default) - When this is `true`, this rule warns shorter type conversions for `string` type.
  45 * `"disallowTemplateShorthand"` (`false` by default) - When this is `true`, this rule warns `string` type conversions using `${expression}` form.
  46 * `"allow"` (`empty` by default) - Each entry in this array can be one of `~`, `!!`, `+` or `*` that are to be allowed.
  47
  48 Note that operator `+` in `allow` list would allow `+foo` (number coercion) as well as `"" + foo` (string coercion).
  49
  50 ### boolean
  51
  52 Examples of **incorrect** code for the default `{ "boolean": true }` option:
  53
  54 ::: incorrect
  55
  56 ```js
  57 /*eslint no-implicit-coercion: "error"*/
  58
  59 var b = !!foo;
  60 var b = ~foo.indexOf(".");
  61 // bitwise not is incorrect only with `indexOf`/`lastIndexOf` method calling.
  62 ```
  63
  64 :::
  65
  66 Examples of **correct** code for the default `{ "boolean": true }` option:
  67
  68 ::: correct
  69
  70 ```js
  71 /*eslint no-implicit-coercion: "error"*/
  72
  73 var b = Boolean(foo);
  74 var b = foo.indexOf(".") !== -1;
  75
  76 var n = ~foo; // This is a just bitwise not.
  77 ```
  78
  79 :::
  80
  81 ### number
  82
  83 Examples of **incorrect** code for the default `{ "number": true }` option:
  84
  85 ::: incorrect
  86
  87 ```js
  88 /*eslint no-implicit-coercion: "error"*/
  89
  90 var n = +foo;
  91 var n = 1 * foo;
  92 ```
  93
  94 :::
  95
  96 Examples of **correct** code for the default `{ "number": true }` option:
  97
  98 ::: correct
  99
 100 ```js
 101 /*eslint no-implicit-coercion: "error"*/
 102
 103 var n = Number(foo);
 104 var n = parseFloat(foo);
 105 var n = parseInt(foo, 10);
 106 ```
 107
 108 :::
 109
 110 ### string
 111
 112 Examples of **incorrect** code for the default `{ "string": true }` option:
 113
 114 ::: incorrect
 115
 116 ```js
 117 /*eslint no-implicit-coercion: "error"*/
 118
 119 var s = "" + foo;
 120 var s = `` + foo;
 121 foo += "";
 122 foo += ``;
 123 ```
 124
 125 :::
 126
 127 Examples of **correct** code for the default `{ "string": true }` option:
 128
 129 ::: correct
 130
 131 ```js
 132 /*eslint no-implicit-coercion: "error"*/
 133
 134 var s = String(foo);
 135 foo = String(foo);
 136 ```
 137
 138 :::
 139
 140 ### disallowTemplateShorthand
 141
 142 This option is **not** affected by the `string` option.
 143
 144 Examples of **incorrect** code for the `{ "disallowTemplateShorthand": true }` option:
 145
 146 ::: incorrect
 147
 148 ```js
 149 /*eslint no-implicit-coercion: ["error", { "disallowTemplateShorthand": true }]*/
 150
 151 var s = `${foo}`;
 152 ```
 153
 154 :::
 155
 156 Examples of **correct** code for the `{ "disallowTemplateShorthand": true }` option:
 157
 158 ::: correct
 159
 160 ```js
 161 /*eslint no-implicit-coercion: ["error", { "disallowTemplateShorthand": true }]*/
 162
 163 var s = String(foo);
 164
 165 var s = `a${foo}`;
 166
 167 var s = `${foo}b`;
 168
 169 var s = `${foo}${bar}`;
 170
 171 var s = tag`${foo}`;
 172 ```
 173
 174 :::
 175
 176 Examples of **correct** code for the default `{ "disallowTemplateShorthand": false }` option:
 177
 178 ::: correct
 179
 180 ```js
 181 /*eslint no-implicit-coercion: ["error", { "disallowTemplateShorthand": false }]*/
 182
 183 var s = `${foo}`;
 184 ```
 185
 186 :::
 187
 188 ### allow
 189
 190 Using `allow` list, we can override and allow specific operators.
 191
 192 Examples of **correct** code for the sample `{ "allow": ["!!", "~"] }` option:
 193
 194 ::: correct
 195
 196 ```js
 197 /*eslint no-implicit-coercion: [2, { "allow": ["!!", "~"] } ]*/
 198
 199 var b = !!foo;
 200 var b = ~foo.indexOf(".");
 201 ```
 202
 203 :::
 204
 205 ## When Not To Use It
 206
 207 If you don't want to be notified about shorter notations for the type conversion, you can safely disable this rule.