javascriptで足し算ができない

HTMLの<area>タグのcoordsに設定された属性値にjavascriptからオフセットを与えようとしたときに引き算はうまくいくのに足し算はうまくいかないという事態に遭遇しました. 以下のコードを実行して加減算をした時の各座標の値を表示してみると原因が分かります.

<map name="example">
    <area shape="rect" coords="50,50,150,150">
</map>
<script>
    const area     = document.querySelector('area')
    let [x1, y1, x2, y2] = area.coords.split(',')
    x1 -= 50
    y1 += 50
    x2 += 50
    y2 += 50
    console.log([x1, y1, x2, y2])   // [0, 0, '15050', '15050']
</script>

つまり引き算の時は数値型として演算が行われているのに対し、足し算の時は文字列型として演算が行われてしまっているようです. 数値型として演算を行いたければ以下の方法があります.

1. 明示的に数値型に変換してから演算を行う
2. 加算も減算として定義する

どう考えても1.の方法の方が良さそうですね.