Search code examples
javascriptarraysconcatenationsliceindexof

Why is it unnecessary to add 1 when mixing quotes in this use case of .slice() and concatenation?


In this tutorial, the section "Making new strings from old parts" gives the task of cutting out undesired data to a achieve human-readable format for train station names.
e.g.
Original string: MAN675847583748sjt567654;Manchester Piccadilly
Desired string: MAN: Manchester Piccadilly

const list = document.querySelector('.output ul');
list.innerHTML = '';
let stations = ['MAN675847583748sjt567654;Manchester Piccadilly',
                'GNF576746573fhdg4737dh4;Greenfield',
                'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',
                'SYB4f65hf75f736463;Stalybridge',
                'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];

for (let i = 0; i < stations.length; i++) {
  let input = stations[i];
  let code = input.slice(0,3);
  let semiC = input.indexOf(';');
  let name = input.slice(semiC + 1);
  let result = code + ': ' + name;
  let listItem = document.createElement('li');
  listItem.textContent = result;
  list.appendChild(listItem);
}

My solution:

let stations = ['MAN675847583748sjt567654;Manchester Piccadilly',
                'GNF576746573fhdg4737dh4;Greenfield',
                'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',
                'SYB4f65hf75f736463;Stalybridge',
                'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];
for (let i = 0; i < stations.length; i++) {
  let input = stations[i];
  let stationAbbr = input.slice(0,3);
  let semicolon = input.indexOf(';');  
  let stationName = input.slice(semicolon);
  let station = stationAbbr + ': " + stationName;
  let listItem = document.createElement('li');
  listItem.textContent = station;
  list.appendChild(listItem);
}

Tutorial solution:

for (let i = 0; i < stations.length; i++) {
  let input = stations[i];
  let code = input.slice(0,3);
  let semiC = input.indexOf(';');
  let name = input.slice(semiC + 1);
  let result = code + ': ' + name;
  let listItem = document.createElement('li');
  listItem.textContent = result;
  list.appendChild(listItem);
}

The tutorial's construction of result is functionally equivalent to my station.
As you can see, however, I made the mistake of mixing single/double quotes when declaring station.
This actually yields the desired outcome, but fixing the quotes adds a semicolon in middle of the output.
Why does mixing quotes here remove the need to specify + 1 in stationName and name?


Solution

  • Going to the tutorial, your code block isn't valid javascript and not working. You can confirm this by pasting the code in the console. Starting a string with ' requires it to finish with '. Using " hasn't signalled for it to end the string and instead becomes part of it.

    The tutorial input window doesn't seem to alert you of any errors or update the output when the code cannot execute. I can replicate your issue by selecting show the solution then pasting your code over it. The correct answer remains but that it due to the solution code.

    That + 1 is needed to select the character after the semicolon, which will be the start of the station name.