diff --git a/app/assets/javascripts/diffs/utils/suggestions.js b/app/assets/javascripts/diffs/utils/suggestions.js
new file mode 100644
index 0000000000000000000000000000000000000000..a272f7f32571f7849055cf6d7c57f967b86f7ec1
--- /dev/null
+++ b/app/assets/javascripts/diffs/utils/suggestions.js
@@ -0,0 +1,28 @@
+function removeEmptyProperties(dict) {
+  const noBlanks = Object.entries(dict).reduce((final, [key, value]) => {
+    const upd = { ...final };
+
+    // The number 0 shouldn't be falsey when we're printing variables
+    if (value || value === 0) {
+      upd[key] = value;
+    }
+
+    return upd;
+  }, {});
+
+  return noBlanks;
+}
+
+export function computeSuggestionCommitMessage({ message, values = {} } = {}) {
+  const noEmpties = removeEmptyProperties(values);
+  const matchPhrases = Object.keys(noEmpties)
+    .map((key) => `%{${key}}`)
+    .join('|');
+  const replacementExpression = new RegExp(`(${matchPhrases})`, 'gm');
+
+  return message.replace(replacementExpression, (match) => {
+    const key = match.replace(/(^%{|}$)/gm, '');
+
+    return noEmpties[key];
+  });
+}
diff --git a/spec/frontend/diffs/utils/suggestions_spec.js b/spec/frontend/diffs/utils/suggestions_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..fbfe9cef85775dc4bb14e871a62f133bf36e91e8
--- /dev/null
+++ b/spec/frontend/diffs/utils/suggestions_spec.js
@@ -0,0 +1,15 @@
+import { computeSuggestionCommitMessage } from '~/diffs/utils/suggestions';
+
+describe('Diff Suggestions utilities', () => {
+  describe('computeSuggestionCommitMessage', () => {
+    it.each`
+      description                                                     | input              | values                        | output
+      ${'makes the appropriate replacements'}                         | ${'%{foo} %{bar}'} | ${{ foo: 'foo', bar: 'bar' }} | ${'foo bar'}
+      ${"skips replacing values that aren't passed"}                  | ${'%{foo} %{bar}'} | ${{ foo: 'foo' }}             | ${'foo %{bar}'}
+      ${'treats the number 0 as a valid value (not falsey)'}          | ${'%{foo} %{bar}'} | ${{ foo: 'foo', bar: 0 }}     | ${'foo 0'}
+      ${"works when the variables don't have any space between them"} | ${'%{foo}%{bar}'}  | ${{ foo: 'foo', bar: 'bar' }} | ${'foobar'}
+    `('$description', ({ input, output, values }) => {
+      expect(computeSuggestionCommitMessage({ message: input, values })).toBe(output);
+    });
+  });
+});