スペースによるバグ

文字列にスペースを慎む
プログラムでは、通常、スペースを使用してコードをより読みやすく表示します.たとえば、スペースを使用して数字とオペレータをvar a = 1 + 1;に区切っています.
しかし、スペースはむやみに使ってはいけません.例えば、うっかりスペースを増やしてしまいました.バグが発生しました

    var postId = '  ';
    var vm = new Vue({
        el: '#app',
        data: {
            title: '',
            content: ''
        },
        created() {
            axios.get('/api/v1/posts/' + postId)
                .then(function (response) {
                    if (response.status !== 200) {
                        throw new Error('error!');
                    }
                    return response.data;
                })
                .then(function (data) {
                    vm.title = data.post.title;
                    vm.content = data.post.content;
                })
                .catch(function (err) {
                    alert(err.message);
                })
        },
        methods: {
            submit() {
                axios.patch('/api/v1/posts/' + postId,
                    {
                        title: vm.title,
                        content: vm.content
                    })
                    .then(function (response) {
                        if (response.status !== 200) {
                            throw new Error('error!');
                        }

                        return response.data;
                    })
                    .then(function (data) {
                        window.location = '/posts/show?id=' + postId;
                    })
                    .catch(function (err) {
                        alert(err);
                    })
            }
        }
    });

エラーは、最初の行がid値を取ったときに、2つのカッコの外にそれぞれスペースを追加したことです.
印刷時に1つの空白では何も見えませんが、リクエストを送信すると、この空白がエスケープされ、サーバが受信すると、このパラメータを正常に解析できません.
したがって、文字列にスペースを慎むことに注意してください.
ejsのルールでは<>内にスペースがあるのは大丈夫ですが、実行時には<>内の計算結果がこの<>に取って代わるので、一応一対のカッコ式と理解しておきましょう.
スペースに言及した以上、jsでのスペースの使用規範を補足します.出典:Airbnb JavaScript Style Guide
空白の使用仕様

インデント

として2つのスペースを使用

括弧の前にスペース

を置く

制御文の括弧の前にスペース

を置く

演算子でスペース

を区切る

ファイルの末尾にスペース

を挿入

チェーン呼び出しの場合、前の点を使用する.新しい文

ではなくメソッド呼び出しであることを強調します.

ブロックの最後と新しい文の前に空の行を挿入します.

1.インデントとして2つのスペースを使用します.

// bad
function () {
∙∙∙∙var name;
}

// bad
function () {
∙var name;
}

// good
function () {
∙∙var name;
}

2.括弧の前にスペースを入れます.

// bad
function test(){
  console.log('test');
}

// good
function test() {
  console.log('test');
}

// bad
dog.set('attr',{
  age: '1 year',
  breed: 'Bernese Mountain Dog'
});

// good
dog.set('attr', {
  age: '1 year',
  breed: 'Bernese Mountain Dog'
});

3.制御文(if、whileなど)の括弧の前にスペースを置きます.関数呼び出しおよび宣言では、関数のパラメータリストの前にスペースを追加しません.

// bad
if(isJedi) {
  fight ();
}

// good
if (isJedi) {
  fight();
}

// bad
function fight () {
  console.log ('Swooosh!');
}

// good
function fight() {
  console.log('Swooosh!');
}

4.演算子をスペースで区切ります.

// bad
var x=y+5;

// good
var x = y + 5;

5.ファイルの最後に空白行を挿入します.

// bad
(function (global) {
  // ...stuff...
})(this);
// bad
(function (global) {
  // ...stuff...
})(this);↵
↵
// good
(function (global) {
  // ...stuff...
})(this);↵

6.ボックスチェーンを使用するときにインデントします.前の点を使用します.新しい文ではなくメソッド呼び出しであることを強調します.

// bad
$('#items').find('.selected').highlight().end().find('.open').updateCount();

// bad
$('#items').
  find('.selected').
    highlight().
    end().
  find('.open').
    updateCount();

// good
$('#items')
  .find('.selected')
    .highlight()
    .end()
  .find('.open')
    .updateCount();

// bad
var leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true)
    .attr('width', (radius + margin) * 2).append('svg:g')
    .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
    .call(tron.led);

// good
var leds = stage.selectAll('.led')
    .data(data)
  .enter().append('svg:svg')
    .classed('led', true)
    .attr('width', (radius + margin) * 2)
  .append('svg:g')
    .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
    .call(tron.led);

7.ブロックの最後と新しい文の前に空白行を挿入します.

// bad
if (foo) {
  return bar;
}
return baz;

// good
if (foo) {
  return bar;
}

return baz;

// bad
var obj = {
  foo: function () {
  },
  bar: function () {
  }
};
return obj;

// good
var obj = {
  foo: function () {
  },

  bar: function () {
  }
};

return obj;