title: Add key value to query param string from the start
body: <p>I hold a set of key values pairs in a String format in my router.
  <br/>Able to extract those values as follows.</p>
  <pre><code>const params = router.location.search; // example value:  ?one=1&amp;two=2&amp;three=3
  </code></pre>
  <p>I need to append another set of key values to this. Thus I end up with the following instead.</p>
  <pre><code>const params = `${router.location.search}&amp;token=${token}`; // value: ?one=1&amp;two=2&amp;three=3&amp;token=${token}
  </code></pre>
  <p>But I want to maintain the order such that the token value is the first query param as follows instead.</p>
  <pre><code>?token=${token}&amp;one=1&amp;two=2&amp;three=3
  </code></pre>
  <p>I can't just move the token to be first in the concatenation cos of the question mark. Would end up as follows which is wrong.</p>
  <pre><code>// wrong cos of the question mark placing. 
  const params = `token=${token}&amp;${router.location.search}`; // value: token=${token}?one=1&amp;two=2&amp;three=3
  </code></pre>
  <p>At present I am doing the following which works but so messy. I am using sub string to
  <br/>remove the question mark from the router value and add it to the start of the newly created <br/>String. Is there a better elegant solution to this?</p>
  <pre><code>const str = router.location.search;
  const params = `?token=${token}&amp;${str.substring(1, str.length)}`;
  </code></pre>
  <p>P.S: I know order in query params doesn't matter but this is needed for visual purposes in the url and some analytic requirements.</p>