They are different operators.
Where x
and y
are numbers2, x | y
is a bit-wise or and x + y
is addition. For some values of x
and y
they will have the same results - for everything else, the result will be different3.
Anyway, use the form that means what is desired1. Don't worry about performance unless there is a performance case - jsperf is a handy tool for this. Then realize that micro-benchmarks and inherently biased and it usually doesn't matter.
1 For this particular problem, note the regular expression matches each A-Z character and replaces it with the result of the function.
Thus we know that charCodeAt(0)
is the character code for A..Z. Looking at a character table we can see these values are in the range [0x41, 0x5a] and note that [0x61, 0x7a] are the corresponding lower-case letters. Thus we can go { A, B .. Z } -> { a, b .. z } by adding 0x20 (or 32) to the upper-case letter's character code.
It can also be observed that adding 32 (or 1 << 5) to a number without the 5th bit set (such as number in the range [0x41, 0x5a]) can be achieved with a bit-wise or with 1 << 5 (i.e x
| 32). This is why |
and +
are interchangeable here. Adding 32 (i.e. x + 0x20) is arguably more clear even though both operators will behave equivalently under the rules above.
In any case, if curious about performance implications of either approach, benchmark the code in it's entirety (and in context) on the relevant/target environments.
2 The operator x | y
is always a bit-wise or (via [ToInt]
conversions), but x + y
could be a string concatenation.
3 The results will be the same only when x
and y
are both numbers (or rather, neither is a string), are convertible via [ToInt]
, have no set bits in common, and are in the range of about [0, 2^32) or so.