Join Values with Pipe Character in JS

I’m trying to glue some values together using the pipe | character but can’t seem to work out why this isn’t working:

vals = vals.join('|');
window.location.replace('<?php echo home_url('cars'); ?>?type=' + vals);

I’m console logging this and can see the output of my values separated by the | character in the console log but not in the url.

Is there any way to get around this?

Any help is appreciated. Thanks in advance!